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以 实际 项 目 为 立足 点 ， 摸 透 Vue.js, 无 论 是 国内 互联 网 公司 已 广泛 
谈 兵 ， 桌面 端 还 是 移动 端 ， 使 用 Vue.js 开 发 ， 
帮助 你 快速 上 手 ! 让 你 从 容 面 对 ! 再 不 学 就 晚 了 ! 


py 中 国 工 信 出 版 集团 ” 移 拓 民 邮 电 出 版 社 


1.3 Vue.jsHJHello world 


D 1 实例 及 选项 





2.1.3 方法 
2.1.4 生命 周期 
2.2 数据 绑 定 





2 2.3 表单 控件 





2, 3 4template 标 俭 





3 L "i v-bind 

3.1.2 v-model 

3.1.3 v-if/v-else/v-show 
3.1.4 v-for 

3.1.5 v-on 

3.1.6 v-text 

3.1.7 v-HTML 

3.1.8 v-el 1 8 v-el 











a L 11 V- aide 
3. L 12 1 once 




















6 Te cis | 


6.6.4 refs oo 





7.3 Vue-devtools 7 











9. 8. 1 ee | 


9. 2 -Getters 








10. a | scroller 
2. 2 dist 





Te >. 4 Slider | 
10. 5. 2 wxc-labbar 





ides 
10.6.2 steam 
10.6.3 modal 
10. > 4 animation 








版 权 信息 
PZ: Vue.js 前 端 开 发 快速 入 门 与 专业 应 用 
ISBN: 978-7-115-44493-6 


本 书 由 人 民 邮 电 出 版 社 发 行 数字 版 。 版 权 所 
有 ’ 侵权 必 F o 





您 购买 的 人 民 邮 电 出 版 社 电 子 书 仅 供 您 个 人 使 
， 未 经 授权 ， 不 得 以 任何 方式 复制 和 传播 本 书 内 


DE: 








我 们 愿意 相信 读者 具有 这 样 的 民 知 和 觉悟， 与 
我 们 共同 保护 知识 产权 。 
如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 对 该 用 户 实 


施 包 括 但 不 限于 关闭 该 帐号 等 维权 措施 ， 并 可 能 追 
完 法 律 责任 。 








4 陈 陆 扬 
贡 任 编辑 赵 FF 


人 民 邮 电 出 版 社 出 版 友 行 =| IER EG 
De APSF LIS 


邮编 “100164 ”电子 邮件 
315@ptpress.com.cn 





网 址 http://www.ptpress.com.cn 
读者 服务 热线 : (010)81055410 


反 盗 版 热线 : (010)81055315 


内 容 拓 要 


本 书 主要 介绍 Vue.js 的 使 用 方法 和 在 实际 项 目 
中 的 运用 ， 它 既 可 以 在 一 个 页 面 中 单独 使 用 ， 也 可 
以 将 整 站 都 构建 成 单 页 面 应 用 。 为 了 便于 理解 ， 本 
书 会 从 传统 的 开发 角度 切入 ， 先 从 数据 泻 染 、 事 件 
绑 定 等 方面 介绍 在 Vue.js 中 的 使 用 方法 ， 然 后 渐进 
到 Vue.js 目 有 身 的 特性 ， 例 如 数据 绑 定 、 过 小 嚣 、 指 
令 以 及 最 重要 的 组 件 部 分 。 除 了 框架 用 法 外 ， 本 书 
还 介绍 了 和 Vue.js 相 关 的 重要 插件 和 构建 工具 ， 这 
些 工 具有 助 于 帮助 用 户 构 建 一 个 完整 的 单 页 面 应 
用 ， 而 不 仅仅 是 停留 在 个 人 DEMO 阶段 的 试验 品 。 
而 对 于 复杂 项 目 ，Vue.js 也 提供 了 对 应 的 状态 管理 
工具 Vuex， 降 低 项 目的 开发 和 维护 成 本 。 和 鉴于 完 移 
前 ，Vue.js 2.0 已 正式 发 布 完毕 ， 本 书 也 在 相关 用 法 
上 对 比 了 1.0 和 2.0 的 区 别 ， 并 补充 了 render 函 数 和 服 


Fe via AS AE VE o 
本 书 适用 于 尚未 接触 过 MVVM 类 前 端 框 架 的 开 


发 者 ， 或 者 初步 接触 Vue.js 的 开发 者 ， 以 及 实际 应 
用 Vue.js 开 发 项 目的 开发 者 。 
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EER, HM AESS A ACRE IALK IN, IAHE 
和 名词 依 旧 不 俘 地 出 现在 开发 者 眼前 ， 而 且 开 发 模 
式 也 产生 了 一 定 的 变化 。 目 前 来 看 ， 前 端 MVVM 框 
娘 的 出 现 给 开发 者 融 来 了 不 小 的 便利 ， 其 中 的 代表 
束 有 Angular.js、React.js 以 及 本 书 中 将 要 介绍 的 
Vue.js。 这 些 框架 的 产生 使 得 开发 者 能 从 过 去 手动 
维护 DOM 状 态 的 索 开 操 作 中 解脱 出 来 ， 尽 可 能 地 
让 DOM 的 更 新 操作 是 自动 的 ， 状 态 变化 的 时 候 束 
目 动 更 新 到 正确 的 状态 。 不 过 ， 新 框架 的 引入 不 可 
避免 的 就 是 学 习 成 本 的 增加 以 及 框架 普及 性 的 问 
是 ， 相 对 于 Angular.js 和 React.js 而 言 ，Vue.js 的 学 习 
曲线 则 比较 平稳 。 上 有 目前 在 GitHub 上 已 经 获得 了 超过 
30000 的 star， 成 为 了 时 下 无 论 从 实用 性 还 是 普 过 性 
来 说 都 是 可 靠 的 MVVM 框 架 选 择 之 一 。 


首次 听 说 Vue.js 的 时 候 ， 都 是 介绍 说 体积 小 、 
适合 移动 疹 、 使 用 简单 ， 等 等 。 但 一 开始 对 于 新 杠 
架 我 一 直 持 观望 态度 ， 毕 竞 前 冰 框 织 更 新 太 快 ， 而 
且 这 又 是 个 个 人 项 目 ， 仅 由 作者 尤 雨 溪 一 人 维护 ， 
不 像 Angular.js 和 React.js 那 样 有 公司 文 持 。 后 来 为 
了 解决 一 个 移动 端的 项 目 ， 我 才 正 式 接 触 了 
Vue.js。 由 于 项 目 本 里 天 然 存 在 组 件 这 个 概念 ， 并 
且 需 要 在 手机 上 运行 ， 调 研 后 党 得 应 该 没有 比 























Vue.js 更 适合 的 工具 了 。 在 使 用 过 程 中 ， 逐 渐 体 会 
到 了 Vue.js 的 便利 ， 数 据 绑 定 及 组 件 系统 对 于 提高 
开发 效率 和 代码 复 用 性 来 说 都 有 相当 大 的 帮助 ， 并 
且 初 期 对 线 上 项 目 使 用 这 种 新 框 织 的 顾虑 也 渐渐 消 
除了 ， 即 使 随 看 后 期 复杂 度 的 增加 也 并 没有 对 项 目 
的 开发 和 维护 成 本 造成 影响。 


本 书 主要 从 我 自身 的 学 习 和 开发 经 验 出 发 ， 介 
绍 了 Vue.js 的 基础 用 法 和 特性 ， 包 括 Vue.js 的 一 些 插 
件 用 法 ， 用 于 解决 突 户 端 路 由 和 大 规模 状态 定理 ， 
以 及 打包 友 布 等 构建 工具 ， 便于 正式 用 于 线 上 环 


境 。 





最 后 ， 感 谢 Vue.js 作 者 尤 雨 溪 先 生 为 前 端 开 友 
者 提供 了 这 球 优 夯 的 框架 ， 使 得 开发 者 能 够 更 好 地 
应 对 项 目 复杂 度 ; 也 感谢 人 民 邮 电 出 版 社 的 大 力 文 
持 ， 写 书 的 过 程 的 确 对 人 十 一 种 折磨 和 考验 ; 最 后 
感谢 每 天 早上 4 点 多 束 开 始 叫 我 起 床 的 两 只 猫 ， 它 
们 对 本 书 的 进度 的 确 起 到 了 很 好 的 推动 作用 。 
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现 出 了 很 多 优秀 的 框架 ， 同 时 这 些 框架 也 正在 逐渐 
改变 我 们 传统 的 前 端 开 发 方式 。Google 的 
AngularJS, FacebookHJReactJS, 1% £6 Ri Ying 
MVC (MVVM) 框架 的 出 现 和 组 件 化 开发 的 普及 
和 规范 化 ， 既 改变 了 原 有 的 开发 思维 和 方式 ， 也 使 
得 前 问 开 发 者 加 快 脚步 ， 更 新 目 己 的 知识 结构 。 
2014 年 2 月 ， 原 Google 员 工 尤 雨 溪 公 开发 布 了 自己 
的 前 端 库 Vue.js， 时 人 至今 日，Vue.js 在 GitHub 上 
己 经 收获 超过 30000star， 而 且 也 有 越 来 越 多 的 开发 
者 在 实际 的 生产 环境 中 运用 它 。 


本 书 主要 以 Vue.js 1.0.26 版 本 为 基准 进行 说 
明 ，Vue.js 2.0 版 本 与 之 不 同 的 地 方 ， 会 在 对 应 章 市 
中 说 明 。 

















1.1 Vue.js 是 什么 


单独 来 讲 ，Vue.js 锌 定义 成 一 个 用 来 开 肥 Web 
界面 的 前 器 库 ， 是 个 非常 轻 量 级 的 工具 。Vue.js 本 
吴 具 有 啊 应 式 编程 和 组 件 化 的 特点 。 


所 谓 啊 应 式 编程 , 即 为 保持 状态 和 视图 的 同步 ， 
这 个 在 大 多 数 前 端 MV* (MVC/MVVM/MVW ) +E 
架 ， 不 管 是 早期 的 backbone.js$ 还 是 现在 AngularJS 都 
对 这 一 特性 进行 了 实现 (也 称 之 为 数据 绑 定 ) ， 但 
这 几 者 的 实现 方式 和 使 用 方式 都 不 相同 。 相 比 而 
言 ，Vue.js 使 用 起 来 更 为 简单 ， 也 无 需 引 入 太 多 的 
新 概念 ， 声 明 实例 new Vue({ data : data H/E BAX 
data 里 面 的 数据 进行 了 视图 上 的 绑 定 。 修 改 data 的 
数据 ， 视 图 中 对 应 数据 也 会 随 之 更 改 。 


Vue.js 的 组 件 化 理念 和 ReactJS 异 曲 同 工 一 一 “一 
切 都 是 组 件 ”， 可 以 将 任意 封装 好 的 代码 注册 成 标 
签 ， 例 如 : Vue.component('example’, Example), PJ 
以 在 模板 中 以 <example></example> 的 形式 调用 。 

如 采 组 件 抽象 得 合理 ， 这 在 很 大 程度 上 能 减少 重复 
开发 ， 而 且 配 合 Vue.js 的 周边 工具 vue-loader， 我 们 

可 以 将 一 个 组 件 的 CSS、HTML 和 js 都 写 在 一 个 文件 
里 ， 做 到 模块 化 的 开发 。 


























除 此 之 外 ，Vue.js 也 可 以 和 一 些 周边 工具 配合 
起 来 ， 例 如 vue-router 和 vue-resource， 支 持 了 路 由 
— 求 ， 这 样 就 满足 了 开发 单 页 面 应 用 的 基本 
条 件 。 








1.2 为 什么 要 用 Vue.js 


相 比 较 Angularjs 和 ReactJS，Vue.js 一 直 以 轻 量 
级 ， 易 上 手 被 称道 。MVVM 的 开发 模式 也 使 前 端 从 
原先 的 DOM 操 作 中 解放 出 来 ， 我 们 不 再 需要 在 维 
护 视 图 和 数据 的 统一 上 花 大 量 的 时 间 ， 只 需要 关注 
于 data 的 变化 ， 代 码 变 得 更 加 容易 维护 。 虽 然 社 区 
和 插件 并 没有 一 些 老牌 的 开源 项 目 那 么 丰 盏 ， 但 满 
足 日 常 的 开发 是 没有 问题 的 。Vue.js 2.0 也 已 经 发 布 
了 beta 版 本 ， 演 染 层 基于 一 个 轻 量 级 的 virtual-DOM 
实现 ， 在 大 多 数 场景 下 初始 化 演 染 速度 和 内 存 消 耗 
都 提升 了 2~4 倍 。 而 阿里 也 开源 了 weex 〈 可 以 理解 
成 ReactUJS-Native 和 ReacJS 的 关系 ) ， 这 也 意味 着 
Vue.js 在 移动 端 有 了 更 多 的 可 能 性 。 


不 过 ， 对 于 为 什么 要 选择 使 用 一 个 框架 ， 都 需 
要 建立 在 一 定 的 项 目 基础 上 。 如 采 脱 离 实际 项 目 情 
况 我 们 来 谈 东 个 框架 的 优 务 ， 以 及 是 否 及 用 这 种 框 
染 ， 我 觉得 是 不 够 严 座 的 。 


作为 新 兴 的 前 端 框 架 ，Vue.js 也 抛弃 了 对 I 正 8 的 
支持 ， 在 移动 端 支持 到 Android 4.2+ 和 iOS 7+。 所 以 
如 果 你 在 一 家 比较 传统 ， 还 需要 支持 IE6 的 公司 的 
话 ， 你 或 许 束 可 以 考虑 其 他 的 解决 方案 了 (或 者 说 





























服 你 的 老板 ) 。 另 外 ， 在 传统 的 前 后 端 混合 〈 通 过 
后 端 模 板 引 擎 泻 染 ) 的 项 目 中 ，Vue.js 也 会 受到 一 
定 的 限制 ，Vue 实 例 只 能 和 后 端 模板 文件 混合 在 一 
起 ， 获 取 的 数据 也 需要 依赖 于 后 端的 泻 染 ， 这 在 处 
理 一 些 JSON 对 象 和 数组 的 时 候 会 有 些 麻 烦 。 


理想 状态 下 ， 我 们 能 和 直接 在 前 后 端 分 离 的 新 项 
目 中 使 用 Vue.js 最 合适 。 这 能 最 大 程度 上 友 挥 Vue.js 
的 优势 和 特性 ， 熟 悉 后 能 极 大 的 提升 我 们 的 开发 效 
率 以 及 代码 的 复 用 率 。 尤 其 是 移动 浏览 器 上 ， 
Vue.js 压 缩 后 只 有 18KB， 而 且 没 有 其 他 的 依赖 。 





1.3 Vue.jst*)Hello world 


现在 来 看 一 下 我 们 第 一 个 Vue.js 项 目 ， 按 照 传 
统 ， 我 们 来 写 一 个 Hello World. 


首先 ， 引 入 Vue.js 的 方式 有 很 多 ， 你 可 以 采用 
直接 使 用 CDN， 例 如 : 


<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/ 
1.0.26/vue.min.js'></script> 





也 可 以 通过 NPM 进 行 安装 : 


npm install vue // 最 新 稳定 版 本 





正确 引入 Vue.js 之 后 ， 我 们 在 HTML 文 件 中 的 
内 容 为 : 





<div id="app"> 
<h1>{{message}}</h1> 
</div> 


A 


应 用 的 js 如 下 : 


var vm = new Vue({ 
el : ‘#app', 
data: { 
message : ‘Hello world, I am Vue.js' 


}); 





输出 结果 为 : 
Hello world, I am Vue.js 


TBA FA A S| BE, Bs 
message 值 蔡 换 了 HTML 模板 中 {{message}} 这 部 
J 


不 过 ， 如 果 仅 仅 是 这 样 的 例子 ， 我 相信 你 也 不 
会 有 什么 兴趣 去 使 用 Vue.js。 根 据 上 文 对 Vue.js 的 说 
明 ， 我 们 继续 写 两 个 有 关于 它 特性 的 例子 。 


第 一 个 特性 是 数据 绑 定 ， 我 们 可 以 在 运行 上 述 
例子 的 浏览 器 控制 台 (console) 环境 中 输入 
vm.message = 'Hello Vue.js'"， 输 出 结果 就 变 为 了 
Hello Vue.js. tH sin HHvm.message All 40, A F H3 
{{message}} 古 绑 定 的 ， 我 们 无 需 手 动 去 获取 <h1> 
标签 来 修改 里 面 的 innerHTML。 


同样 ， 我 们 也 可 以 绑 定 用 户 输入 的 数据 ， 视 图 
会 随 着 用 户 的 输入 而 变化 ， 例 如 : 


<div id="app"> 
<h1>Your input is {{ message }}</h1> 
<input type="text” v-model=”message”> 
</div> 





Your input is Hello, World 


Hello, World 





vm.message 的 值 会 随 大 用 户 在 input 中 输入 的 值 
的 变化 而 变化 ， 而 无 需 我 们 手动 去 获取 DOM 元 素 
的 值 再 同步 到 js 中 。 


第 二 个 特性 是 组 件 化 ， 人 简单 来 说 我 们 可 以 目 己 


定义 HTML 标 签 ， 并 在 模板 中 使 用 它 ， 例 如 : 


<div id="app"> 
<message content='Hello World'></message> 
</div> 
<script type="text/javascript"> 
var Message = Vue.extend({ 
props : ['content'], 
template : ‘'<h1>{{content}}</h1>' 
}) 


Vue.component('message', Message); 
var vm = new Vue({ 

el : '#app', 
}); 


</script> 





我 们 在 浏览 右 里 最 终 看 到 的 HTML 结 朱 为 : 





可 以 看 到 自 定义 的 标签 <message> 被 替换 成 了 
<h1>Hello World</h1>， 当 然 ， 实 际 中 的 组 件 化 远 
比 示例 复杂 ， 我 们 会 给 组 件 添加 参数 及 方法 ， 使 之 
能 更 好 地 被 复 用 。 


如 果 说 这 几 个 例子 引起 了 你 对 Vue.js 的 兴趣 的 
话 ， 那 接 下 来 我 们 惑 会 详细 地 说 明 它 的 基础 用 法 和 


应 用 场景 ， 以 及 最 终 我 们 如 何 将 它 真 实地 运用 到 生 
产 环境 中 。 


Qe ”基础 特性 


其 实 ， 无 论 前 端 框 架 如 何 变 化 ， 它 需要 处理 的 
捉 情 依旧 是 模板 渲染 、 事 件 绑 定 、 处 理 用 户 交 互 
(输入 信息 或 鼠标 操作 ) ， 只 不 过 提供 了 不 同 的 写 
法 和 理念 。Vue.js 则 会 通过 声明 一 个 实例 new 
Vue({...) 标 记 当 前 页 面 的 HTML 结 构 、 数 据 的 展示 
及 相关 事件 的 绑 定 。 本 章 主 要 介绍 Vue.js 的 构造 函 
数 的 选项 对 象 及 用 法 ， 以 及 如 何 通 过 Vue.js 来 实现 
上 述 的 篆 规 前 端 功能 。 





2.1 实例 及 选项 


从 以 前 的 例子 可 以 看 出 ，Vue.js 的 使 用 都 是 通 
过 构造 函数 Vue({foptionj) 创 建 一 个 Vue 的 实例 : var 
vm = new Vue({})。 一 个 Vue 实 例 相 当 于 一 个 
MVVM 模 式 中 的 ViewModel， 如 图 2-1 所 示 。 


MERE 


(ViewModel) 





展示 和 展示 多 辑 业务 逻辑 和 数据 
图 2-1 
在 实例 化 的 时 候 ， 我 们 可 以 传 入 一 个 选项 对 
象 ， 包 含 数据 、 模 板 、 挂 载 元 素 、 方 法 、 和 生命 周期 


钩子 等 选项 。 下 面 就 对 一 些 第 用 的 选项 对 象 属性 进 
行 具体 的 说 明 。 


2.1.1 模板 


选项 中 主要 影响 模板 或 DOM 的 选项 有 el 和 
template， 属 性 replace 和 template 需 要 一 起 使 用 。 





el: 类 型 为 字符 串 ，DOM 元 素 或 函数 。 其 作用 
是 为 实例 提供 挂 载 元 素 。 一 般 来 说 我 们 会 使 用 css 选 
择 符 ， 或 者 原生 的 DOM 元 素 。 例 如 el:#app'。 在 初 
始 项 中 指定 了 el， 实 例 将 立即 进入 编译 过 程 。 








template: 类 型 为 字符 串 。 上 默认 会 将 template 值 
符 换 挂 载 元 系 〈 即 el 值 对 应 的 元 系 ) ， 并 合并 挂 载 
元 素 和 模板 根 节 点 的 属性 〈 如 果 属 性 具有 唯一 性 ， 
类 似 id， 则 以 模板 根 节 点 为 准 ) 。 如 果 replace 为 
false， 模 板 template 的 值 将 插入 挂 载 元 系 内 。 通 过 
template 插 入 模板 的 时 候 ， 挂 载 元 素 的 内 容 都 将 被 
互联 ， 除 非 使 用 slot 进 行 分 友 (有 大 slot 内 容 将 在 第 
6 章 组 件 中 介绍 ) 。 在 使 用 template 时 ， 我 们 往往 不 
会 把 所 有 的 HIML 字 符 串 直接 写 在 js 里 面 ， 这 样 影 
啊 可 读 性 而 且 也 不 利于 维护 。 所 以 经 常用 '#tpl' 的 方 
式 赋 值 ， 并 且 在 body 内 容 添 加 <scrip id="tpl" 
type="x-template"> 为 标签 包含 的 HTML 内 容 ， 这 样 
瓯 能 将 HITML 从 js 中 分 离开 来 ， 示 例如 下 : 














<div id="app"> 
<p>123</p> 

</div> 

<script id="tpl" type="x-template"> 
<div class='tpl'> 

<p>This is a tpl from script tag</p> 

</div> 

</script> 

<script type="text/javascript"> 


var vm = new Vue({ 
el : '#app', 
template : ‘#tpl' 
})3 


</script> 





最 终 输 出 HIML 结 构 为 ; 


v<div class="tpl" id="app 
p>This is a tpl from script tag</p 
/div 


Vue.js 2.0 中 废除 了 replace 这 个 参数 ， 并 且 强 制 
要 求 每 一 个 Vue.js 实 例 需 要 有 一 个 根 元 素 ， 即 不 人 允 
许 组 件 模 板 为 : 





<script id="tpl" type="x-template"> 
<div class='tpl'> 
</div> 
<div class='tpl'> 


</div> 
</script> 
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写成 : 


<script id="tpl" type="x-template"> 
<div class='wrapper' > 
<div class='tpl'> 


</div> 
<div class='tpl'> 


</div> 
</div> 
</script> 





2.1.2 ”数据 


Vue.js 实 例 中 可 以 通过 data 属 性 定义 数据 ， 这 些 
数据 可 以 在 实例 对 应 的 模板 中 进行 绑 定 并 使 用 。 需 
要 注意 的 是 ， 如 果 传 入 data 的 是 一 个 对 象 ，Vue 实 
例会 代理 起 data 对 象 里 的 所 有 属性 ， 而 不 会 对 传 入 
的 对 象 进行 深 找 贝 。 另 外 ， 我 们 也 可 以 引用 Vue 实 
例 vm 中 的 $data 来 获取 声明 的 数据 ， 例 如 : 











var data = { a: 1 } 
var vm = new Vue({ 
data: data 
}) 
vm.$data === data // -> true 


vm.a === data.a // -> true 
// 设置 属性 也 会 影响 到 原始 数据 
vm.a = 2 

data.a // -> 2 

// 反之 亦 然 

data.a = 3 

vm.a // -> 3 





然后 在 模板 中 使 用 {f{a}} 束 会 输出 vm.a 的 值 ， 
并 且 修 改 vm.a 的 值 ， 模 板 中 的 值 会 随 之 改变 ， 我 们 
也 会 称 这 个 数据 为 啊 应 式 (responsive) 数据 (具体 
的 用 法 和 特性 会 在 第 2.2 节 的 数据 绑 定 中 说 明 ) 。 


需要 注意 的 是 ， 只 有 初始 化 时 传 入 的 对 象 才 是 
啊 应 式 的 ， 即 在 声明 完 实例 后 ， 再 加 上 一 句 
vm.$data.b = '2'， 并 在 模板 中 使 用 {{tb}}， 这 时 是 不 
会 输出 字符 串 '2' 的 。 例 如 : 











<div id="app"> 
<p>{{a}}</p> 
<p>{{b}}</p> 
</div> 
var vm = new Vue({ 
el : '#app', 
data : { 
a a 
} 
}); 


vm. $data.b = 2; 











如 果 需 要 在 实例 化 之 后 加 入 啊 应 式 变量 ， 需 要 
调用 实例 方法 $set， 例如 : 


vm.$set('b', 2); 





不 过 Vue.js 并 不 推荐 这 么 做 ， 这 样 会 抛 出 一 个 


NIZ 


Ey A’ 
Jes 


© > [Vue warn]: You are setting a non-existent path "b" on a vm instance. Consider pre- 
initializin property w " option for more reacti 


所 以 ， 我 们 应 尽量 在 初始 化 的 时 候 ， 把 所 有 的 
变量 都 设 定 好 ， 如 果 没 有 值 ， 也 可 以 用 undefined 或 
null 占 位 。 


另外 ， 组 件 类 型 的 实例 可 以 通过 props 获 取 数 
所， 同 data 一 样 ， 也 需要 在 初始 化 时 预 设 好 。 示 
Bil 





<my-component title='myTitle' content='myContent' ></my- 
component> 


var myComponent = Vue.component('my-component', { 
props : ['title', ‘content'], 
template : '<h1>{{title}}</h1><p>{{content}}</p>' 
}) 





我 们 也 可 以 在 上 述 组 件 类 型 实例 中 同时 使 用 
data， 但 有 两 个 地 方 需要 注意 : O data 的 值 必须 是 
一 个 函数 ， 并 且 返 回 值 是 原始 对 象 。 如 果 传 给 组 件 
的 data 是 一 个 原始 对 象 的 话 ， 则 在 建立 多 个 组 件 实 
例 时 它们 就 会 共用 这 个 data 对 象 ， 修 改 其 中 一 个 组 
件 实 例 的 数据 束 会 影响 到 其 他 组 件 实例 的 数据 ， 这 
显然 不 是 我 们 所 期 望 的 。@) data 中 的 属性 和 props 中 
的 不 能 重 名 。 这 两 者 均 会 抛 出 异 锦 : 





所 以 正确 的 使 用 方法 如 下 : 





var MyComponent = Vue.component('my-component', { 
props : ['title', ‘content'], 
data : function() { 
return { 
desc : '123' 
} 
Jo 


template : '<div> \ 


<hi>{{title}}</h1> \ 

<p>{{content}}</p> \ 

<p>{{desc}}</p> \ 
</div>’ 


}) 





2.1.3 方法 


我 们 可 以 通过 选项 属性 methods 对 象 来 定义 方 
法 ， 并 用 使 用 von 指令 来 监听 DOM 事 件 ， 例 如 





<button v-on:click="alert"/>alert<button> 
new Vue({ 
el : ‘#app', 
data: {a: 1}, 
methods : { 
alert : function() { 
alert(this.a); 














另外 ，Vue.js 实 例 也 支持 自 定 义 事件 ， 可 以 在 
初始 化 时 传 入 events 对 象 ， 通 过 实例 的 $emit 方 法 进 
行 触 有 发。 这 和 套 通 信 机 制 间 用 在 组 件 间 相互 通信 的 情 





况 中 ， 例 如 子 组 件 冒 泡 触 用 父 组 件 事 件 方法 ， 或 者 
父 组 件 广 播 茶 个 事件 ， 子 组 件 对 其 进行 监听 等 。 这 
里 先 简单 说 明 下 用 法 ， 详 细 的 情况 将 会 在 第 6 草 组 
件 中 进行 说 明 。 


var vm = new Vue({ 
el : ‘#app', 
data : data, 
events : { 
‘event.alert' : function() { 
alert('this is event alert :' + this.a); 


} 
} 
}); 


vm.$emit('event.alert'); 





而 Vue.js 2.0 中 废弃 了 events 选 项 属性 ， 不 再 支 
持 事 件 广播 这 类 特性 ， 推 荐 直接 使 用 Vue 实 例 的 全 
局 方法 $on(/$emit()， 或 者 使 用 插件 Vuex 来 处 理 。 


2.1.4 生命 周期 


Vue.js 实 例 在 创建 时 有 一 系列 的 初始 化 步骤 ， 
例如 建立 数据 观 坚 ,编译 模板 ， 创 建 数据 绑 定 等 。 
在 此 过 程 中 ， 我 们 可 以 通过 一 些 定义 好 的 生命 周期 
钩子 函数 来 运行 业务 逻辑 。 例 如 : 


var vm = new Vue({ 
data: { 
a: 1 


created: function () { 


console.log( ‘created’ ) 
} 
}) 





运行 上 述 例子 时 ， 浏 览 絮 console 中 束 会 打印 出 


created。 


下 图 是 实例 的 生命 周期 ， 可 以 根据 提供 的 生命 
周期 钩子 说 明 Vue.js 实 例 各 个 阶段 的 情况 ，Vue.js 
2.0 对 不 少 钩子 进行 了 修改 ， 以 下 一 并 说 明 。 


Vue.js 实例 生命 周期 ( 原 图 出 目 于 Vue.js 官 
网 ) ， 如 图 2-2 所 示 。 


new Vue() 


初始 化 事件 






vm.$mount(el) 


手动 调用 后 才 进入 下 一 步 






编译 模板 并 替换 el 编译 el 包含 的 模板 内 容 






首次 调用 时 会 


document 


载 到 


vm.$destroy() 


beforeDestroy 的- se ss i 


解除 数据 绑 定 ， 子 组 件 
及 取消 事件 监听 


图 2-2 


init: 在 实例 开始 初始 化 时 同步 调用 。 此 时 数据 
观 汕 、 事 件 等 都 尚未 初始 化 。2.0 中 更 名 为 


beforeCreate 。 


created: 在 实例 创建 之 后 调用 。 此 时 已 完成 数 
据 绑 定 、 事 件 方法 ， 但 尚未 开始 DOM 编 译 ， 即 未 
挂 载 到 document 中 。 





beforeCompile: 在 DOM 编 译 前 调用 。2.0 废 弃 了 
该 方法 ， 推 荐 使 用 created。 


beforeMount: 2.0 新 增 的 生命 周期 钩子 ， 在 


mounted 之 前 运行 。 


compiled: 在 编译 结束 时 调用 。 此 时 所 有 指令 已 
生效 ， 数 据 变 化 已 能 触发 DOM 更 新 ， 但 不 保证 $el 
已 插入 文档 。2.0 中 更 名 为 mounted。 


ready: 在 编译 结束 和 $el 第 一 次 插入 文档 之 后 
调用 。2.0 废 庵 了 访 方 法 ， 推 荐 使 用 mounted。 这 个 
变化 其 实 已 经 改变 了 ready 这 个 生命 周期 状态 ， 相 当 
于 取消 了 在 $el 首 次 插入 文档 后 的 钩子 函数 。 


attached: 在 vm.$el 插 入 DOM 时 调用 ，ready 会 


在 第 一 次 attached 后 调用 。 操 作 $el 必 须 使 用 指令 或 
实例 方法 〈 例 如 $appendTo0) ， 直 接 操 作 vm.$el 不 
会 触及 这 个 钩子 。2.0 废 弃 了 讼 方法 ， 推 荐 在 其 他 钧 
子 中 自 定义 方法 检查 是 否 已 挂 载 。 


detached: 同 attached 类 似 ， 议 钩子 在 vm.$el 从 
DOM 删 除 时 调用 ， 而 且 必 须 是 指令 或 实例 方法 。 
2.0 PF AER SIZ TT 

beforeDestroy: 在 开始 销毁 实例 时 调用 ， 此 刻 实 
例 仍然 有 效 。 


destroyed: 在 实例 被 销毁 之 后 调用 。 此 时 所 有 
AE RUSE PTE AAR, PSE PTL ER BY 


beforeUpdate: 2.0818 HI anal HAP, EK 
挂 载 之 后 ， 再 次 更 新 实例 《例如 更 新 data) 时 会 调 
用 该 方法 ， 此 时 疝 未 更 新 DOM 结 构 。 


updated:2.0 新 增 的 生命 周期 钩子 ， 在 实例 挂 载 
之 后 ， 再 次 更 新 实例 并 更 新 完 DOM 结 构 后 调用 。 

activated: 2.0 新 增 的 生命 周期 钩子 ， 需 要 配合 
动态 组 件 keep-live 属 性 使 用 。 在 动态 组 件 初始 化 泻 
染 的 过 程 中 调用 该 方法 。 


deactivated: 2.0 新 增 的 生命 周期 钩子 ， 需 要 配 




















合 动态 组 件 keep-live 属 性 使 用 。 在 动态 组 件 移 出 的 
过 程 中 调用 该 方法 。 

可 以 通过 与 一 个 简单 的 demo 来 更 清楚 地 了 解 内 
部 的 运行 机 制 ， 代 码 如 下 : 





var vm = new Vue({ 

el : '#app', 

init: function() { 
console.log('init'); 

Jo 

created: function() { 
console.log('created'); 

Jo 

beforeCompile: function() { 
console.log('beforeCompile' ) ; 

Jo 

compiled: function() { 
console.log('compiled'); 

Jo 

attached: function() { 
console.log('attached'); 

Jo 

dettached: function() { 
console.log('dettached'); 

Jo 

beforeDestroy: function() { 
console.log('beforeDestroy'); 

Jo 

destroyed: function() { 
console.log('destroyed'); 

Jo 

ready: function() { 


console.log('ready' ) ; 
// 组 件 完成 后 调用 gdestory() 函 数 ， 进 行销 毁 
this.$destroy(); 
} 
}); 





输出 结果 为 : 


beforeDestroy 


2.2 ”数据 绑 定 


Vue.js 作为 数据 驱动 视图 的 框架 ， 我 们 首先 要 
知道 的 束 是 如 何 将 数据 在 视图 中 展示 出 来 ， 传 统 的 
Web 项 目 中 ， 这 一 过 程 往往 是 通过 后 端 模板 引擎 来 
进行 数据 和 视 岁 的 这 人 染 ， 例 如 PHP 的 smarty，Java 
的 velocity 和 freemarker。 但 这 样 导 致 的 情况 是 前 后 
谓语 法 会 区 杂 在 一 起 ， 前 器 HTML 文件 中 需要 包含 
后 端 模板 引擎 的 语法 ， 而 且 泻 染 完成 后 如 果 需 要 再 
次 修改 视图 ， 就 只 能 通过 获取 DOM 的 方法 进行 修 
改 ， 并 手动 维持 数据 和 视 网 的 一 致 。 而 Vue.js 的 核 
心 是 一 个 啊 应 式 的 数据 绑 定 系统 ， 建 立 绑 定 后 ， 
DOM 将 和 数据 你 持 同步 ， 这 样 就 无 需 手 动 维护 
DOM， 使 代码 能 够 更 加 简洁 易 懂 、 提 升 效率 。 


2.2.1 数据 绑 定 语法 


本 小 节 主 要 介绍 Vue.js 的 数据 绑 定 语法 ， 出 现 
的 例子 会 基于 以 下 js 代码 : 



































var vm = new Vue({ 
el : '#app', 


avatar : ‘http://.....' 
count : [1, 2, 3, 4, 5] 
names : ['Vue1.0', ‘'Vue2.0'], 


items : [ 
{ name : 'Vue1.0', version : '1.0' }, 
{ name : 'Vuel1.1', version : '1.0' } 
] 





1. 文本 插值 





数据 绑 定 最 基础 的 形式 就 是 文本 插值 ， 使 用 的 
是 双 大 括号 标签 {{j}， 为 *Mustache” 语 法 〈 源 上 自前 
hig NX S| £Mustache.js) ， 示 例如 下 : 


<span>Hello {{ name }}</span> // -> Hello Vue 





Vue.js 实 例 vm 中 name 属 性 的 值 将 会 替换 
Mustache 标 签 中 的 name， 并 且 修 改 数据 对 象 中 的 
name 属 性 ，DOM 也 会 随 之 更 新 。 在 浏览 妖 console 
中 运行 vm.name = 'Vue 1.0', 输出 结果 为 Hello Vue 
1.0。 








模板 语法 同时 也 支持 单 次 插值 ， 即 首次 赋值 后 
再 更 改 vm 实 例 属性 值 不 会 引起 DOM 变 化 , 例如 以 下 
模板 在 运行 vrm.name ='Vue 1.0' 后 ， 依 旧 会 输出 
Hello Vue: 





<span>Hello {{* name }} </span> // -> Hello Vue 








Vue.js 2.0 去 除了 {{*}} 这 种 写法 ， 采 用 v-once 代 
茶 。 以 上 模板 需要 改写 为 <span v- once=”name”> 
{{name}}</span>. 


2. HTML 属性 


Mustache 标 签 也 同样 适用 于 HTML 属 性 中 ， 例 
un: 


<div id="id-{{id}}"></div> // <div id="id-1"></div> 





Vue.js 2.0 中 废弃 了 这 种 写法 ， 用 v-bind 指 令 代 
#, <div v-bind:id="id-' + id"/></div> 代 蔡 ， 或 简写 
为 <div :id="id-' + id"></div> 


3. JERIA 


放 在 Mustache 标签 内 的 文本 内 容 称 为 绑 定 表 
达 式 。 除 了 直接 输出 属性 值 之 外 ， 一 段 绑 定 表达 式 
可 以 由 一 个 简单 的 JavaScript 表达 式 和 可 选 的 一 个 
Ne PW EAS IM. POO: 








{{ index + 1 }} // 1 
{{ index == © ? ‘a' : 'b'}} // a 
{{ name.split('').join('|') }} // Vlule 





每 个 绑 定 中 只 能 包含 单个 表达 式 ， 并 不 文 持 
JavaScript 语 句 ， 人 否则 Vue.js 束 会 抛 出 warning 腊 季 。 
并 且 绑 定 表达 式 里 不 文 持 正 则 表达 式 ， 如 采 需 要 进 
行 复 某 的 转换 ， 可 以 使 用 过 小 器 或 者 计算 属性 来 进 
行 处 理 ， 以 下 的 例子 即 为 无 效 的 表达 式 : 

{{ var a = 1}} // 无效 


{{ if (ok) { return name } }} // 无 效 ， 但 可 以 写成 ok ? n 
ame : '' 或 者 ok && name 这 样 的 写法 





Vue.js 绑 定 表达 式 warning: 





]: Avo ing 
fue warn]: Avo ng reserved keywords in expression; if(index == 0) return name 1 
J: Inv expre ， 





4. 过 滤器 


Vue.js 允许 在 表达 式 后 添加 可 选 的 过 滤 妖 ， 以 
TE AE | ”指示 。 示 例 : 


{{ name | uppercase }} // VUE 





Vue.js 将 name 的 值 传 入 给 uppercase 这 个 内 置 的 
过 滤器 中 《本 质 是 一 个 图 数 ) ， 返 回 字符 串 的 大 与 
值 。 同 时 也 允许 多 个 过 滤器 链 式 使 用 ， 例 如 : 








{{ name | filterA | filterB }} 





也 允许 传 入 多 个 参数 ， 例 如 : 


{{ name | filterA arg1 arg2}} 





此 时 ，filterA 将 name 的 值 做 为 第 一 个 参数 ， 
argl1，arg2 做 为 第 二 、 第 三 个 参数 传 入 过 小 兹 函数 
中 。 最 终 函 数 的 返回 值 即 为 输出 结果 。arg1，arg2 
可 以 使 用 表达 式 ， 也 可 以 加 上 单 引 号 ， 直 接 传 入 字 
符 串 。 例 如 : 


{{ name.split('') | limitBy 3 1 }} // ->u,e 


Wis a limitBy H 以 接受 两 个 参数 ， 第 一 个 参数 
是 设置 显示 个 数 ， 第 二 个 参数 为 可 选 ， 指 从 开始 元 
素 的 数组 下 标 。 


Vue.js 内 置 了 10 个 过 滤器 ， 下 面 简 单 介绍 它们 
的 功能 和 用 法 。 


© capitalize: 字符 串 和 站 字符 转化 成 大 写 
© uppercase: 字符 串 转 化 成 大 写 

(3) lowercase: 字符 串 转 化 成 小 写 

(4) currency 参数 为 {String}[ 货 币 人 符号 ] ， 


{Number} [小 数位 ]， 将 数字 转化 成 贷 币 符 写 ， 并 且 
会 目 动 添加 数字 分 市 号 。 例 如 : 














{{ amount | currency '¥' 2 }} // -> 行 amount 值 为 16666， 
iH ¥ 10,000.00 





©) pluralize 参数 为 {String} single, [double, 
triple]， 字 符 串 复数 化 。 如 果 接 收 的 是 一 个 参数 ， 
那 复 数 形式 就 是 在 字符 串 末 尾 直 接 加 一 个 “s”。 如 果 
接收 多 个 参数 ， 则 会 被 当成 数组 处 理 ， 字 符 串 会 添 
加 对 应 数组 下 标的 值 。 如 果 字 符 串 的 个 数 多 于 参数 
Mas Zea aA Ia TSAI. BI 
H: 





<p v-for="c in count">{{ c | pluralize 'item' }} {{ c 
| pluralize 'st' 'nd' 'rd' 'th' }}</p> 





A~ + 
输出 结果 : 
litem Ist 
2items 2nd 
3items 3rd 
4items 4th 


© json BAAN {Number} [indent] 4 tg 4A vt RL, 


与 JSON.stringify() 作 用 相同 ， 将 json 对 象 数据 输出 
成 符合 json 格 式 的 字符 串 。 


T debounce 传 入 值 必须 是 函数 ， 参 数 可 选 ， 
为 {Number}[waitlj， 即 延 时 时 长 。 作 用 是 当 调 用 函 
数 n 坚 秒 后 ， 才 会 执行 该 动作 ， 知 在 这 n 室 秒 内 又 调 
用 此 动作 则 将 重新 计算 执行 时 间 。 例 如 : 





<input v-on:keyup ="onKeyup | debounce 566"> // input 元 
素 上 监听 了 keyup 事 件 ， 并 且 延 迟 566ms 触 发 








limitBy 传 入 值 必 须 是 数组 ， 参 数 为 
{Number}limit, {Number}[offset], limit 为 显示 个 
数 ，offset 为 开始 显示 数组 下 标 。 例 如 ; 


<div v-for="item in items | limitBy 10"></div> // item 


s 为 数组 ， 且 只 显示 数组 中 的 前 十 个 元 素 








© filterBy 传 入 值 必须 是 数组 ， 参 数 为 {String | 
Function} targetStringOrFunction， 即 需要 匹配 的 字 
符 串 或 函数 《〈 通 过 函数 返回 值 为 true 或 false 来 判断 
PLACER) ; “in”《〈 可 选 分 隅 符 ) ; {String}... 


searchKeys]|， 为 检索 的 属性 区 域 。 示 例 : 


<p v-for="name in names | filterBy '1.0'">{{name}}</p> 
// 检索 items 数 组 中 值 包 含 1.6 的 元 素 

<p v-for="item in items | filterBy '1.0' in 'name'">{{ 

item | json}}</p> // 检索 items 数 组 中 元 素 属性 name 值 为 1.6 的 

元 素 输出 。 检 索 区 域 也 可 以 为 数组 ， 即 in [name，version]， 在 多 


个 属性 中 进行 检索 





上 述 两 个 例子 的 输出 结 条 为 : 


Vuel.0 


{ "name": "Vuel.0", "version": "1.0" } 


<p v-for="item in items | filterBy customFilter">{{ ite 
m | json}}</p> // 使 用 自 定 义 的 过 滤 函 数 ， 函 数 可 以 在 选项 meth 
ods 中 定义 
methods : { 
customFilter : function(item) { 
if(item.name) return true // 检索 所 有 元 素 中 包含 name 


属性 的 元 素 
} 


} 








orderBy 传 入 值 必须 是 数组 ， 参 数 为 


{String|Array|Function}sortKeys, BFE xe AE APES o 
这 里 可 以 使 用 单个 键 名 ， 也 可 以 传 入 包含 多 个 排序 
键 名 的 数组 。 也 可 以 像 Array.Sort0 那 样 传 入 自己 的 
排序 策略 函数 。 第 二 个 参数 为 可 选 参数 {String} 
[order]， 即 选择 升序 或 降序 ，order>=0 为 升序 ， 
order<0 为 降序 。 下 面 以 三 种 不 同 的 参数 例子 来 说 明 
具体 的 用 法 : 


单个 键 名 : <p v-for="item in items | orderBy 'name' -1">{ 
{item.name}}</p> // items 数 组 中 以 键 名 name 进 行 降序 排列 

多 个 键 名 : <p v-for="item in items | orderBy [name,versio 
n] ">{{item.name}}</p> // 使 用 items 里 的 两 个 键 名 进行 排序 

自 定 义 排序 函数 : <p v-for="item in items | orderBy custom 
Order">{{item.name}} 

</p> 

methods: { 


customOrder: function (a, b) { 
return parseFloat(a.version) > parseFloat(b.versio 
n) // 对 比 item 中 version 的 值 的 大 小 进行 排序 
} 


} 





需要 注意 的 是 ，Vue.js 2.0 中 己 经 去 除了 内 置 的 
过 小 器 ， 但 也 不 用 担心 ， 我 们 会 在 第 4 章 中 详细 许 
AAAS AE, CAA unt FR Ae eS M 
且 Vue.js 的 社区 中 本 身 就 有 优秀 的 开源 过 小 器， 比 
如 处 理 时 间 的 moment.jjs， 和 货币 格式 化 处 理 的 


— Pee FE 8 Fe HP W H UEH Vue. js it) 
插件 。 


Vue.js$ 也 提供 指令 (Directives) 这 一 概念 ， 可 
以 理解 为 当 表达 式 的 值 发 生 改 变 时 ， 会 有 些 特殊 行 
为 作用 到 绑 定 的 DOM 上 。 指 令 通 常会 直接 书写 在 
模板 的 HIML 元 素 中 ， 而 为 了 有 别 于 普通 的 属性 ， 
Vue.js 指 令 是 带 有 前 级 的 v- 的 属性 。 写 法 上 来 说 ， 
指令 的 值 限 定 为 绑 定 表达 式 ， 所 以 上 述 提 到 的 
JavaScript 表达 式 及 过 滤器 规则 在 这 里 也 适用 。 本 
书 会 在 第 3 章 中 详细 讲述 指令 及 目 定 义 指 令 的 作 
用 。 本 市 先 简 单 介绍 指令 绑 定 数据 和 事件 的 语法 。 


(参数 


<img v-bind:src="avatar" /> 


指令 v-bind 可 以 在 后 面市 一 个 参数 ， 用 冒号 
C) 隅 开 ，src 即 为 参数 。 此 时 img 标 签 中 的 src 会 与 
vm 实例 中 的 avatar 绑 定 ， 等 同 于 : 


<img src="{{avatar}}" /> 











Ooo O 


D IZINI 


修饰 符 (Modifiers) 是 以 半角 句号 .开始 的 特殊 
后 经， 用 于 表示 指令 应 该 以 特殊 方式 绑 定 。 


<button v-on:click.stop="doClick"></button> 


v-on 的 作用 是 在 对 应 的 DOM 元 素 上 绑 定 事件 监 
听 堪 ，doClick 为 函数 名 ， 而 stop 即 为 修饰 符 ， 作 用 
是 俘 止 冒 泡 ， 相 当 于 调用 了 e. stopPropagation(). 


2.2.2 ”计算 属性 

在 项 目 开 发 中 ， 我 们 展示 的 数据 往往 需要 经 过 
一 些 处 理 。 除 了 在 模板 中 绑 定 表达 式 或 者 利用 过 滤 
器 外 ，Vue.js 还 提供 了 计算 属性 这 种 方法 ， 避 免 在 
模板 中 加 入 过 重 的 业务 逻辑 ， 保 证 模板 的 结构 清晰 
和 可 维护 性 。 
1. 基础 例子 


[var vm = new Vue({ | 























el : ‘#app, 


data: { 
firstName : ‘Gavin', 
lastName: 'CLY' 

} 


computed : { 
fullName : function() { 
// this 指向 vm 实例 
return this.firstName + ' ' + this.lastName 


<p>{{ firstName }}</p> // Gavin 
<p>{{ lastName }}</p> // CLY 
<p>{{ fullName }}</p> // Gavin CLY 





此 时 ， 你 对 vm.firstName 和 vm.lastName 进 行 修 
改 ， 始 终 会 影响 vm.fullName。 


2. Setter 


如 有 果 说 上 面 那个 例子 并 没有 体现 出 来 计算 属性 
的 优势 的 话 ， 那 计算 属性 的 Setter 方 法 ， 则 在 更 新 
属性 时 给 我 们 带 来 了 便利 。 示 例 : 
var vm = new Vue({ 


el : '#el', 
data: { 


cents : 100, 
} 
computed : { 
price : { 
set : function(newValue) { 
this.cents = newValue * 100; 
}s 
get : function() { 
return (this.cents / 10@).toFixed(2); 





在 处 理 商品 价格 的 时 候 ， 后 端 往往 会 把 价钱 定 
义 成 以 分 为 蛙 位 的 整 型 ， 避 免 在 处 理 浮 点 类 型 数据 
时 产生 的 问题 。 而 前 端 则 需要 把 价钱 再 转 成 元 进行 





展示 ， 而 且 如 果 需 要 对 价钱 进行 修改 的 话 ， 则 又 要 
把 输入 的 价格 再 恢复 到 分 传 给 后 中 ， 很 是 索 珊 。 


而 在 使 用 Vue.js 的 计算 属性 后 ， 我 们 可 以 将 
vm.cents 设置 为 后 问 所 存 的 数据 ， 计 算 属 性 price 为 
前 端 展示 和 更 新 的 数据 。 





<p>&yen;{{price}}</p> // ¥1.00 





此 时 更 改 vm.price = 2，vm.cents 会 被 更 新 为 
200， 在 传递 给 后 端 时 无 需 再 手动 转化 一 过 数据 。 


Errors Warnings Info Logs Debug Handled 


2.2.3 ”表单 控件 


Vue.js 中 提供 v-model 的 指令 对 表单 元 素 进 行 双 
癌 数 据 绑 定 ， 在 修改 表单 元 系 值 的 同时 ， 实 例 vm 中 
对 应 的 属性 值 也 同时 更 新 ， 反 之 亦 然 。 本 小 节 会 介 
绍 主要 input 元 素 绑 定 v-model 后 的 具体 用 法 和 处 理 
方式 ， 示 例 所 依赖 的 jg 代 人 码 如 下 : 











var vm = new Vue({ 

el : ‘#app', 

data: { 
message : '' 
gender : ‘'' 
checked : '' 
multiChecked : [], 
selected : '', 
multiSelected : [] 


Pe 


1. Text 


输入 框 示 例 ， 用 户 输 入 的 内 容 和 vm.message 和 直 
接 绑 定 : 


<input type="text" v-model="message" /> 
<span>Your input is : {{ message }}</span> 





hello Your input is : hello 


2. Radio 
单 选 框 示例 : 


<label><input type="radio" value="male" v-model="gender 
"> </lable> 

<label><input type="radio" value="female" v-model="gend 

er ">&</lable> 


<p>{{ gender }}</p> 





gender 值 即 为 选中 的 radio 元 系 的 value 值 。 


o# Ok male 


3. Checkbox 


Checkbox 分 两 种 情况 : 单个 义 选 框 和 多 个 义 选 
框 。 


单个 勺 选 枉 ，v-model 即 为 布尔 值 ， 此 时 input 
的 value 并 不 影响 Vv-model 的 值 。 


<input type="checkbox" v-model="checked" /> 
<span>checked : {{ checked }}</span> 





checked : true 


多 个 勾 选 框 ，v-model 使 用 相同 的 属性 名 称 ， 
且 属 性 为 数组 。 





<label><input type="checkbox" value="1" v-model=" multi 
Checked">1</lable> 
<label><input type="checkbox" value="2" v-model=" multi 
Checked">2</lable> 
<label><input type="checkbox" value="3" v-model=" multi 


Checked">3</lable> 
<p>MultiChecked: {{ multiChecked.join('|') }}</p> 





010273 


MultiChecked: 112 


4. Select 


司 Checkbox 元 素 一 样 ，Select 也 分 单 选 和 多 选 
两 种 ， 多 选 的 时 候 也 需要 绑 定 到 一 个 数组 。 


单 选 : 


<select v-model="selected"> 
<option selected>A</option> 
<option>B</option> 
<option>C</option> 

</select> 

<span>Selected: {{ selected }}</span> 





<select v-model="multiSelected" multiple> 
<option selected>A</option> 
<option>B</option> 
<option>C</option> 
</select> 
<br> 
<span>MultiSelected: {{ multiSelected.join('|') }}</spa 
n> 


CC | 


A 图 Selected: A 


A 
B 
Cc 


MultiSelected: AIC 


5. 4h value 


表单 控件 的 值 同样 可 以 绑 定 在 Vue 实 例 的 动态 
属性 上 上， 用 v-bind 实 现 。 示 例 : 


1. Checkbox 


<input type="checkbox" v-model="checked" v- 
bind:true-value="a" v-bind:false-value="b"> 


选中 : yvm.checked == vm.a // -> true 
未 选中 : vm.checked == vm.b // -> true 
2. Radio 


<input type="radio" v-model="checked", v- 
bind:value="a"> 


选中 : vm.checked == vm.a // -> true 


3. Select Options 
<select v-model="selected"> 
<!-- 对 象 字 面 量 --> 


<option v-bind:value="{ number: 123 
}">123</option> 


</select> 
选中 : 
typeof vm.selected // -> 'object' 
vm.selected.number // -> 123 
6. 参数 特性 


Vue.js 为 表单 控件 提供 了 一 些 参数 ， 方 便 处 理 
HE E ERNE o 


CD lazy 
默认 情况 下 ，v-model 在 input 事件 中 同步 输入 


ae 数据 ， 加 lazy 属 性 后 从 会 改 到 在 change 事件 
同步 。 





<input v-model="query" lazy /> 





(2) number 


会 日 动 将 用 户 输入 转 为 Number 类 型 ， 如 果 原 
值 转换 结果 为 NaN 则 返回 原 值 。 


<input v-model="age" number/> 





(8) debounce 


debounce 为 设置 的 最 小 延 时 ， 单 位 为 ns， 即 为 





单位 时 间 内 仅 执行 一 次 数据 更 新 。 该 参数 往往 应 用 
在 高 耗 拘 作 上 ， 例 如 在 更 新 时 及 出 ajax 请 求 返 回 提 


— pr. 
示 信 A. 


<input v-model="query" debounce="500" /> 





不 过 Vue.js 2.0 中 取消 了 lazy 和 number 作 为 参 
数 ， 用 修饰 符 (modifier) KRÈ: 


<input v-model.lazy="query" /> <input v-model.numer="a 
ge" /> 





新 增 了 trim 修 饰 行 ， 去 挥 输入 值 首尾 空格 : 


<input v-model.trim="name" /> 








去 除了 debounce 这 个 参数 ， 原 因 是 无 法 监测 到 
输入 新 数据 ， 但 尚未 同步 到 vm 实例 属性 时 这 个 状 
态 。 如 采 仍 有 需要 ， 官 方 提 供 了 手动 实现 的 例 
 https://jsbin.com/zefawu/3/edit?html,output 。 


2.2.4 Class 与 Style 绑 定 


在 开发 过 程 中 ， 我 们 经 常会 迪 到 动态 添加 类 名 
或 直接 修改 内 联 样式 (例如 tab 切 换 ) 。class 和 style 
都 是 DOM 元 素 的 attribute， 我 们 当然 可 以 直接 使 用 
v-bind 对 这 两 个 属性 进行 数据 绑 定 ， 例 如 <p v- 
bind:style='style><p>， 然 后 通过 修改 vm.style 的 值 
对 元 素 样 式 进行 修改 。 但 这 样 未 免 过 于 繁琐 而 且 容 
易 出 错 ， 所 以 Vue.js 为 这 两 个 属性 单独 做 了 增强 处 
理 ， 表 达 式 的 结果 类 型 除了 字符 串 之 外 ， 还 可 以 是 





对 象 和 数组 。 本 小 节 就 会 对 这 两 个 属性 具体 的 用 法 
进行 说 明 。 


1. Class4h 3€ 


H e WH eclassRPE, RATA E WY Bois AY LA 
是 对 象 和 数组 ， 具 体 的 语法 如 下 : 


D 对 象 语 法 : v-bind:class 接 受 参数 是 一 个 对 
象 ， 而 且 可 以 与 普通 的 class 属 性 共存 。 


<div class="tab" v-bind:calss="{'active' : active , ‘un 
active’ : lactive}"> 
</div> 
vm 实例 中 需要 包含 
data : { 


active : true 


} 





演 染 结果 为 : <div class="tab active"></div> 


D 数组 语法 : v-bind:class 也 接受 数组 作为 参 
BN 





<div v-bind:class="[classA, classB]"></div> 
vm 实例 中 需要 包含 
data : { 


classA : ‘class-a', 
classB : ‘class-b' 


} 





yA ugt H JJ; <div class="class-a class-b"> 


</div>. 


也 可 以 使 用 三 元 表达 式 切 换 数组 中 的 class， 
<div v-bind:class="[classA, isB ? classB : "|"> 
</div>。 如 果 vm.isB = false, 则 演 染 结果 为 <div v- 
bind:class="class-a"></div>. 


2. A ERAE SUS E 


style 属 性 绑 定 的 数据 即 为 内 联 样 式 ， 同 样 具 有 
对 象 和 数组 两 种 形式 : 


(D 对 象 语法 : 耳 接 绑 定 符合 样式 格式 的 对 象 。 

















<div v-bind:style="alertStyle"></div> 


data : { 
alertStyle : { 
color : ‘red', 
fontSize : '20px' 
} 


} 


除了 直接 绑 定 对 象 外 ， 也 可 以 绑 定单 个 属性 或 
直接 使 用 字符 中 。 











<div v-bind:style="{ fontSize : alertStyle.fontSize, co 
lor : 'red'}"></div> 





D 数组 语法 : v-bind:style 允许 将 多 个 样式 对 
RABE FAR TLR LE. 


<div v-bind:style="[ styleObjectA, styleObjectB]" .></d 
iv> 





3， 目 动 添加 前 绥 


在 使 用 transform 这 类 属性 时 ，v-bind:style 会 根 
据 雷 要 自动 添加 厂商 前 级 。:style 在 运行 时 进行 前 级 
探测 ， 如 采 浏 览 右 版 本 本 吴 束 文 持 不 加 前 绥 的 css 属 
PE, ALBANS YS 


2.3 BEATE Ye 


当 获 取 到 后 端 数据 后 ， 我 们 会 把 它 按照 一 定 的 
规则 加 载 到 写 好 的 模板 中 ， 输 出 成 在 浏览 器 中 显示 
的 HTML， 这 个 过 程 就 称 之 为 演 染 。 而 Vue.js 是 在 
Bjim CEU bas A) 进行 的 模板 演 染 。 本 市 主要 介 
绍 Vue.js 演 染 的 基本 语法 。 


2.3.1 前 后 端 演 染 对 比 


早期 的 web 项 目 一 般 是 在 服务 器 端 进行 泻 染 ， 
服务 器 进程 从 数据 库 获 取 数 据 后 ， 利 用 后 端 模板 引 
擎 ， 甚 至 于 直接 在 HTML 模 板 中 骨 入 后 端 语言 ( 例 
如 JSP，， 将 数据 加 载 进 来 生成 HTML， 然 后 通过 
网 络 传输 到 用 户 的 浏览 嚣 中， 然后 被 浏览 器 解析 成 
可 见 的 页 面 。 而 前 并 泻 染 则 是 在 浏览 右 里 利用 JS 把 
数据 和 HTML 模 板 进 行 组 合 。 两 种 方式 各 有 自己 的 
优 缺 点 ， 需 要 更 具 自 己 的 业务 场景 来 选择 技术 方 


Ro 











mE RAET: 


中 业 务 分 离 ， 后 端 只 需要 提供 数据 接口 ， 前 器 
在 开 友 时 也 不 需要 部 著 对 应 的 后 端 坏 境 ， 通 过 一 些 








代理 服务 右 工 具 束 能 远程 获取 后 站 数据 进行 开发 ， 
能 够 提升 开发 效率 。 


2) 计算 量 转移 ， 原 本 需要 后 端 泻 染 的 任务 转移 
给 了 前 端 ， 减 轻 了 服务 右 的 压力 。 


I Jes met REN ILA EF 

O 对 搜索 引擎 友好 。 

© 首页 加 载 时 间 短 ， 后 端 泻 染 加 载 完成 后 就 直 
接 显 示 HTML， 但 前 站 渲染 在 加 载 完 成 后 还 需要 有 
段 js 洽 染 的 时 间 。 


Vue.js 2.0 开始 文 持 服 务 端 泻 染 ， 从 而 让 开 友 
者 在 使 用 上 有 了 更 多 的 选择 。 

















2.3.2 ATER 

Vue.js 提供 v- 让 ，v-show，v-else，v-for 这 几 个 
指令 来 说 明 模 板 和 数据 间 的 逻辑 天 系 ， 这 基本 束 构 
成 了 模板 引擎 的 主要 部 分 。 下 面 将 详细 说 明 这 几 个 
指令 的 用 法 和 场景 。 


1. v-if/v-else 


Vv-if 和 和 v-else 的 作用 是 根据 数据 值 来 判断 是 否 输 





出 该 DOM 元 素 ， 以 及 包含 的 子 元 素 。 例 如 : 


<div v-if="yes">yes</div> 





如 果 当 前 vm 实 例 中 包含 data.yes = true， 则 模板 
引擎 将 会 编译 这 个 DOM 节 点 ， 输 出 
<div>yes</div>. 


我 们 也 可 以 利用 v-else 来 配合 v-if 使 用 。 例 如 : 


<div v-if="yes">yes</div> 
<div v-else>no</div> 





需要 注意 的 是 ，v-else 必 须 紧 跟 v-if， 不 然 该 指 
令 不 起 作用 。 例 如 : 


<div v-if="yes">yes</div> 


<p>the v-else div shows</p> 
<div v-else>no</div> 








最 终 这 三 个 元 素 都 会 输出 显示 在 浏览 志 中 。 


Vv-if 绑 定 的 元 素 包 含 子 元 素 则 不 影响 和 v-else 的 
使 用 。 例 如 : 











<div v-if="yes"> 
<div v-if="inner">inner</div> 
<div v-else>not inner</div> 
</div> 
<div v-else>no</div> 
new Vue({ 
data : { 


yes : true, 
inner : false 
} 
}) 





输出 结果 为 : 


<div> 
<div>not inner></div> 
</div> 





2. v-show 


除了 v- 让 ，v-show 也 是 可 以 根据 条 件 展 示 元 素 
的 一 种 指令 。 例 如 : 


<div v-show="show">show</div> 





也 可 以 搭配 v-else 使 用 ， 用 法 和 v-if 一 致 。 例 
如 : 


<div v-show="show">show</div> 
<div v-else>hidden</div> 








与 v-if 不 同 的 是 ，v-show 元 素 的 使 用 会 演 染 并 
保持 在 DOM 中 。v-show 只 是 切换 元 素 的 css 属 性 
display。 例 如 : 





<div v-if="show">if</div> 
<div v-show="show">show</div> 





show 分 别 为 true 时 的 结果 : 


— v-if vs v-show > 
div>if</div 
div>show</div 


show 分 别 为 false 时 的 结 
<!— y-if vs v-show 
div style="display: none; 
3. v-if vs v-show 


从 上 述 v-show 图 能 够 明显 看 到 ， 当 v-if 和 和 v- 
show 的 条 件 发 生变 化 时 ，v-if 引 起 了 dom 操 作 级 别 
的 变化 ， 而 v-show 仅 发 生 了 样式 的 变化 ， 从 切换 的 
角度 考虑 ，v-show 消 耗 的 性 能 要 比 v- 计 小 。 


除 此 之 外 ， v-if 切 换 时 ，Vue.js 会 有 一 个 局 部 
编译 / 务 载 的 过 程 ， 因 为 v-if 中 的 模板 也 可 能 包括 数 
据 绑 定 或 子 组 件 。v-if 会 确保 条 件 块 在 切换 当中 适 
当地 销毁 与 中 间 内 部 的 事件 监听 器 和 子 组 件 。 而 且 
V-if 是 惰性 的 ， 如 果 在 初始 条 件 为 假 时 ，v- 让 本 刁 什 
么 都 不 会 做 ， 而 v-show 则 仍 会 进行 正常 的 操作 ， 然 
后 把 css 样 式 设置 为 display:none。 

所 以 ， 总 的 来 说 ，v-it 有 更 高 的 切换 消耗 而 v- 
show 有 更 高 的 初始 演 染 消耗 ， 我 们 需要 根据 实际 的 
使 用 场景 来 选择 合适 的 指令 。 


2.3.3 ”列表 泻 染 

















v-for 指 令 主 要 用 于 列表 演 染 ， 将 根据 接收 到 数 
组 重复 泻 染 v-for 绑 定 到 的 DOM 元 素 及 内 部 的 子 元 
际 ， 并 且 可 以 通过 设置 别名 的 方式 ， 获 取 数 组 内 数 
据 泻 染 到 节点 中 。 例 如 : 





<ul> 
<li v-for="item in items"> 
<h3>{{item.title}}</h3> 
<p>{{item.description}}</p> 
</li> 
</ul> 
var vm = new Vue({ 
el : '#app', 
data: { 
items : [ 
{ title : 'title-1', description : ‘description-1 


{ title : ‘'title-2', description : 'description-2 


{ title : 'title-3', description : ‘description-3 


{ title : 'title-4', description : ‘description-4 





其 中 items 为 data 中 的 属性 名 ，item 为 别名 ， 可 
以 通过 item 来 获取 当前 数组 遍历 的 每 个 元 素 ， 输 出 





结果 为 : 


<ul> 
<li> 
<h3>title-1</h3> 
<p>description-1</p> 
</li><li> 
<h3>title-2</h3> 
<p>description-2</p> 
</li><li> 
<h3>title-3</h3> 
<p>description-3</p> 
</li><li> 
<h3>title-4</h3> 
<p>description-4</p> 
</li> 
</ul> 





Vv-for 内 置 了 $index 变 量 ， 可 以 在 v-for 指 令 内 调 
FA, rth SU AZ CARAS]. Ab, EMI AT A 
目 己 指定 索引 的 别名 ， 如 <li v-for="(index,item) in 
items">{{index}} — {{$index}} — {{item.title}} 
</li>， 输 出 结果 为 : 








<ul> 
<li> 
© - © - title-1 
</li><li> 
1 - 1 - title-2 


</li><li> 
2 - 2 - title-3 
</li><li> 
3 - 3 - title-4 
</li> 
</ul> 





需要 注意 的 是 Vue.js 对 data 中 数组 的 原生 方法 进 
行 了 封闭， 所 以 在 改变 数组 时 能 触发 视图 更 新 ， 但 
以 下 两 种 情况 是 无 法 触发 视图 更 新 的 : 





O 通过 索引 直接 修改 数组 元 素 ， 例 如 


vim.items[0] = { title : title-changed 


D 无 法 直接 修改 “修改 数组 ”的 长 度 ， 例如 : 


vim.items.length = 0 

对 于 第 一 种 情况 ，Vue.js 提 供 了 $set 方 法 ， 在 修 
改 数据 的 同时 进行 视图 更 新 ， 可 以 写成 : 

vin.items.$set(0, { title : 'title-changed'} 或 者 
vi.$set(‘items[0]', { title : 'title- also-changed'}), 这 
PTT SAS AY DAA BIR 

FES FACE RA ie, AAEREN HAET, 
如 果 数 组 中 有 唯一 标识 id， 例 如 : 


items : [ 
{ id: 1, title : ‘'title-1'}, 
{ id: 2, title : ‘'title-2'}, 
{ _ id : 3, title : ‘'title-3'} 





通过 trace- by 给 数组 t 改定 唯一 标识 ， 我 们 将 上 
述 v-for 作 用 于 的 1 元 素 修 改 为 : 


<li v-for="item in items" track-by="_id"></1li> 








这 样 ，Vue.js 在 泻 染 过 程 中 会 尽量 复 用 原 有 对 





象 的 作用 域 及 DOM 元 素 。 


v-for 除 了 可 以 遇 历 数组 外 ， 也 可 以 过 历 对 象 ， 
与 $index 类 似 ， 作 用 域内 可 以 访问 男 一 内 置 变 量 
$key， 也 可 以 使 用 (key, value) 形式 目 定 义 key 变 


Š 
HÆ o 





<li v-for="(key, value) in objectDemo"> 
{{key}} - {{$key}} : {{value}} 

</li> 

var vm = new Vue({ 


el : '#app', 
data: { 
objectDemo : { 
a: ‘a-value', 
b : 'b-value', 
c : ‘'c-value', 





输出 结 


e a-a:a-value 
e b-b:b-value 
e c-c:c-value 


最 后 ，v-for 还 可 以 接受 单个 整数 ， 用 作 循 环 次 
BR: 


<li v-for="n in 5"> 


{{ n }} 


</li> 





输出 结 


® 0 0 0 @ 
WN © 


2.3.4 templates, Hix 


上 述 的 例子 中 ，v-show 和 v-if 指 令 都 包 
个 根 元 系 中 ， 那 是 否 有 方式 可 以 将 I 
wWEDOMTARE? Vue.js 提 供 了 template 标 签 ， 我 
们 可 以 将 指令 作用 到 这 个 标签 上 ， 但 最 后 的 泻 染 结 
果 里 不 会 有 它 。 例 如 : 








<template v-if="yes"> 
<p>There is first dom</p> 
<p>There is second dom</p> 
<p>There is third dom</p> 


</template> 





输出 结果 为 : 





同样 ， template 标 签 也 文 持 使 用 v-for 指 令 ， 朋 
来 演 染 同 级 的 多 个 兄 第 元 素 。 例 如 : 


<template v-for="item in items"> 
<p>{{item.name}}</p> 
<p>{{item.desc}}<p> 


</template> 





2.4 事件 绑 定 与 监听 


当 横 板 演 染 完 成 之 后 ， 束 可 以 进行 事件 的 绑 定 
与 监听 了 。Vnue.js 提 供 了 v-on 指 令 用 来 监听 DOM 事 
件 ， 通 第 在 模板 内 直接 使 用 ， 而 不 像 传统 方式 在 js 
中 获取 DOM 元 素 ， 然 后 绑 定 事件 。 例 如 : 


<button v-on:click="say">Say</button> 


2.4.1 ”方法 及 内 联 语句 处 理 需 


通过 v-on 可 以 绑 定 实例 选项 属性 methods 中 的 方 
法 作为 事件 的 处 理 器 ，v-on: 后 参数 接受 所 有 的 原生 
事件 名 称 。 例 如 : 





<button v-on:click="say">Say</button> 
var vm = new Vue({ 
el : ‘#app', 
data: { 
msg : ‘Hello Vue.js' 


Jo 
methods : { 
say : function() { 
alert(this.msg); 
} 


} 
}); 


#iFbutton, BU Ay fi sayižt, 5% H alert 
框 'Hello Vue.js'。 


Vue.js 也 提供 了 v-on 的 缩写 形式 ， 我 们 可 以 将 
模板 中 的 内 容 改写 为 <button 
(@click='say'>Say</button>， 这 两 句 语 句 是 等 价 的。 


除了 直接 绑 定 methods 函 数 外 ，v-on 也 支持 内 联 
JavaScript 语 句 ， 但 仅 限 一 个 语句 。 例 如 














<button v-on:click="sayFrom ('from param')">Say</button 
> 
var vm = new Vue({ 


el : ‘#app', 

data: { 
msg : ‘Hello Vue.js' 

}s 

methods : { 
sayFrom: function(from) { 

alert(this.msg + '' + from); 

} 


} 
}); 








在 直接 绑 定 methods 函 数 和 内 联 JavaScript 语 名 
时 ， 都 有 可 能 需要 获取 原生 DOM 事 件 对 象 ， 以 下 
两 种 方式 都 可 以 获取 : 





<button v-on:click="ShowEvent">Event</button> 


<button v-on:click="showEvent($event)">showEvent</butto 
n> 


<button v-on:click="ShowEvent()">showEvent</button> // 
这 样 写 获取 不 到 event 
var vm = new Vue({ 

el : ‘#app', 

methods : { 


showEvent : function(event) { 
console. log(event) ; 








同一 元 素 上 也 可 以 通过 v-on 绑 定 多 个 相同 事件 
函数 ， 执 行 顺 序 为 顺序 执行 ， 例 如 ; 


<div v-on:click="SsayFrom('first')" v-on:click ="sayFrom 
('second)"> 





2.4.2 ”修饰 从 

Vue.js 为 指令 v-on 提 供 了 多 个 修饰 从 ， 方 便 我 
们 处 理 一 些 DOM 事 件 的 细节 ， 并 且 修 饰 符 可 以 串 
联 使 用 。 主 要 的 修饰 符 如 下 。 

stop: 等 同 于 调用 event. stopPropagation(). 

.prevent: 等 同 于 调用 event.preventDefault()。 


„capture: {E H capture tt SUAS Ss (Fi UT AF o 


self: 只 当 事 件 是 从 监 昕 元 系 本 里 触 友 时 才 触 肥 
回调 。 


使 用 方式 如 下 : 








<a v-on:click.stop='doThis' ></a> 

<form v-on:submit.prevent="onSubmit"></form> // 阻止 表单 
默认 提交 事件 

<form v-on:submit.stop.prevent="onSubmit"></form> // BH 


止 默 认 提 交 事 件 且 阻止 冒 泡 


<form v-on:submit.stop.prevent></form> // 也 可 以 只 有 修饰 
符 ， 并 不 绑 定 事件 





可 以 答 试 运行 以 下 这 个 例子 ， 更 好 地 理解 修饰 


符 在 其 中 起 到 的 作用 。 


var vm = new Vue({ 
el : ‘#app', 
methods : { 
saySelf(msg) { 
alert(msg) ; 


} 
}); 


<div v-on:click="saySelf('click from inner')" v-on:clic 


k.self="saySelf('click from self')"> 

<button v-on:click="saySelf('button click')">button</ 
button> 

<button v-on:click.stop="saySelf('just button click") 
">button</button> 
</div> 





Zi 


除了 事件 修饰 符 之 外 ，v-on 还 提供 了 按键 人 
从 ， 方 便 我 们 监听 键盘 事件 中 的 控 键 。 例 如 : 


<input v-on:keyup.13="submit"/> // 监听 input 的 输入 ， 当 输 
入 回 车 时 触发 Submit 函 数 〈 回 车 的 keycode 值 为 13) ， 用 于 处 理 常 见 
的 用 户 输入 完 直 接 按 回 车 键 提交 ) 








Vue.js 给 一 些 第 用 的 按键 名 所 供 了 别称 ， 这 样 


了 怠 省 去 了 一 些 记 keyCode 的 事件 。 全 部 按键 别名 
JJ: enter. tab. delete. esc. space. up. down, 
left、right。 例 如 : 


<input v-on:keyup.enter="submit" /> 





Vue.js 也 允许 我 们 目 己 定义 按键 别名 ， 例 如 : 


Vue.directive('on').keyCodes.f1 = 112; // 即 可 以 使 用 <inp 
ut v-on:keyup.f1="help" /> 





Vue.js 2.0 中 可 以 直接 在 Vue.config.keyCodes 里 
还 加 目 定 义 按 键 别 名 ， 无 需 修 改 v-on 指 令 ， 例 如: 


Vue.config.keyCodes.f1 = 12. 


2.4.3 fe 2c Fae YX Fl 





如 果 你 之 前 没有 接触 过 Angularjs，ReactJS 这 类 
框架 ， 或 许 会 对 Vue.j$s 这 种 事件 监听 方式 感到 困 
惑 。 毕 苋 我 们 一 开始 接受 的 理念 就 是 将 HTML 和 JS 
隔离 开 编 号 。 但 其 实 Vue.js 事 件 处 理 方 法 和 表达 式 





都 严格 绑 定 在 当前 视图 的 ViewModel 上 ， 上 所 以 并 不 
会 导致 维护 困难 。 


而 这 么 写 的 好 处 在 于 : 


O 无 需 手 动 管理 事件 。ViewModal 被 销毁 时 ， 
所 有 的 事件 处 理 器 都 会 目 动 被 删除 ， 让 我 们 从 获取 
DOM 绑 定 事件 然后 在 特定 情况 下 再 解 绑 这 样 的 事 
情 中 解脱 出 来 。 


(2) 解 帮 。ViewModel 代 人 码 是 纯粹 的 逻辑 代码 ， 
和 DOM 无 关 ， 有 利于 我 们 写 目 动 化 测试 用 例 。 


还 有 个 与 以 往 不 同 的 细节 是 ， 我 们 在 处 理 Ul、 
li 这 种 列表 ， 尤 其 是 下 拉 刷 新 这 种 需要 异步 加 载 数 
据 的 列表 时 ， 人 往往 会 把 1 事件 代 理 到 u 上 ， 这 样 异 
步 加 载 进来 的 新 数据 束 不 需要 再 次 绑 定 事件 。 而 
Vue.js 这 类 的 框 如 由 于 不 需要 手动 添加 事件 ， 往 往 
直接 会 把 事件 绑 定 在 li 上 ， 类 似 这 样 :<li v- 
repeat="item in items" v-on:click="clickLi"></li>, ## 
论 上 每 次 新 增 1i 的 时 候 都 会 进行 同 1 个 数 的 事件 绑 
定 ， 比 用 事件 代理 多 耗 了 些 性 能 。 但 在 实际 运用 中 
并 没有 什么 特别 的 性 能 瓶 琉 影响 ， 而 且 我 们 也 省 去 
在 代理 中 处 理 etarget 的 步骤 ， 让 事件 和 DOM 元 际 
关系 更 紧密 、 人 简单 。 











2.5 Vue.extend() 


组 件 化 开发 也 是 Vue.js 中 非常 重要 的 一 个 特 
性 ， 我 们 可 以 将 一 个 页 面 看 成 一 个 大 的 根 组 件 ， 里 
面包 含有 的 元 素 就 是 不 同 的 子 组 件 ， 子 组 件 也 可 以 在 
不 同 的 根 组 件 里 被 调用 。 在 上 述 例子 中 ， 可 以 看 到 
生 一 个 页 面 中 通常 会 声明 一 个 Vue 的 实例 new 
Vue({}) 作 为 根 组 件 ， 那 么 如 何 生 成 可 被 重复 使 用 
的 子 组 件 呢 ? Vue.js 提 供 了 Vue.extend(options) 方 
法 ， 创 建 基 础 Vue 构 造 嚣 的“ 子 类 ”， 参 数 options 对 
ae 使 用 方 
法 如 下 : 



































var Child = Vue.extend({ 
template : '#child', 
// 不 同 的 是 ，e1l 和 data 选 项 需要 通过 函数 返回 值 赋值 ， 避 免 多 个 
组 件 实 例 共用 一 个 数据 
data : function() { 
return { 


i 
} 


Vue.component('child', Child) // 全 局 注册 子 组 件 


<child ...></child> // 子 组 件 在 其 他 组 件 内 的 调用 方式 


更 多 组 件 的 使 用 方法 将 会 在 第 6 章 中 进行 详细 
的 说 明 。 


3H Je 


指令 是 Vue.js 中 一 个 重要 的 特性 ， 主 要 提供 了 
一 种 机 制 将 数据 的 变化 映射 为 DOM 行 为 。 那 什么 
叫 数据 的 变化 映射 为 DOM 行 为 ?前 文中 章 述 过 
Vue.js 征 通过 数据 驱动 的 ， 所 以 我 们 不 会 直接 去 修 
改 DOM 结 构 ， 不 会 出 现 类 似 于 
$('u1").append('<li>one</li>") 这 样 的 操作 。 当 数据 变 
化 时 ， 指 令 会 依据 设 定好 的 操作 对 DOM 进 行 修 
改 ， 这 样 就 可 以 只 关注 数据 的 变化 ， 而 不 用 去 管理 
E 
l za 


Vue.js 本 映 融 捉 供 了 大 量 的 内 置 指 令 来 进行 对 
DOM 的 操作 ， 我 们 也 可 以 开 及 目 定 义 指 令 。 本 章 
主要 介绍 部 分 常见 指令 的 使 用 及 场景 以 及 自 定 义 指 
令 的 开 及 和 指令 相关 的 参数 。 

















3.1 内 置 指令 
本 节 主 要 介绍 Vue.js 的 内 置 指令 。 
3.1.1 v-bind 


v-bind 主 要 用 于 动态 绑 定 DOM 元 素 属 性 
(attribute) ， 即 元 际 属 性 实际 的 值 是 由 vm 实 例 中 
的 data 属 性 提供 的 。 例 如 : 


<img v-bind:src='‘avatar' /> 
new Vue({ 
data : { 
avatar : ‘http://...' 


}) 





v-bind 可 以 简写 为 : ， 上 述 例子 即 可 简写 为 


<img :SrC= avatar />。 


v-bind 还 拥有 三 种 修饰 符 ， 分 别 
为 .sync、.once、.camel， 作 用 分 别 如 下 。 


.sync: 用 于 组 件 props 必 性， 进行 双 辐 绑 定 ， 


即 父 组 件 绑 定 传递 给 子 组 件 的 值 ， 无 论 在 哪个 组 件 
中 对 其 进行 了 修改 ， 其 他 组 件 中 的 这 个 值 也 会 随 之 
更 新 。 例 如 : <my-child :parent.sync='parent'></my- 
child>。 父 组 件 实 例 vm.parent 将 通过 prop 选 项 传递 
给 子 组 件 my-child， 即 my-child 组 件 构造 函数 需要 定 
义 选项 props:[parent]， 便 可 通过 子 组 件 上 自身 实例 
vm.parent 获 取 父 组 件 传递 的 数据 。 两 个 组 件 都 共享 
这 一 份 数据 ， 不 论 谁 修改 了 这 份 数据 ， 组 件 获 取 的 
数据 都 是 一 致 的 。 但 一 般 不 推荐 子 组 件 直 接 修 改 父 
这 样 会 导致 耦合 且 组 件 内 的 数据 不 容易 
维护 。 


once: 同 .synce 一 样 ， 用 于 组 件 props 必 性， 但 
进行 的 是 单 次 绑 定 。 和 双 回 绑 定 正好 相反 ， 单 次 绑 
定 是 将 绑 定 数据 传递 给 子 组 件 后 ， 子 组 件 单独 维护 
这 份 数 据 ， 和 父 组 件 的 数据 再 无 关系 ， 父 组 件 的 数 
据 发 生变 化 也 不 会 影响 子 组 件 中 的 数据 。 例 如 : 


<my-child :parent.once='parent'></my-child> 


camel: KR RE ARETE FER al Se a 4 R 
能 用 于 普通 HTML 属 性 的 绑 定 ， 通 常会 用 于 svg 标 签 
下 的 属性 ， 例 如 : <svg width='400' height='300' 
:View-box.camel='"viewBox'></svg>， 输 出 结果 即 为 
<svg width="400" height="300" viewBox="....."> 
</svg> 





不 过 在 Vue.js 2.0 中 ， 修 饰 从 .syce 和 .once 均 被 废 
莽 ， 规 定 组 件 间 仅 能 单 问 传递 ， 如 果子 组 件 需要 修 
改 父 组 件 ， 则 必须 使 用 事件 机 制 来 进行 处 理 。 








3.1.2 v-model 


V-model 指 令 在 第 2.2.3 小 节 中 的 表单 控件 中 已 
经 说 明 过 了 ， 这 里 束 不 再 葡 述 了 。 访 指令 主要 用 于 
input、select、textarea 标 签 中 ， 具 有 lazy、number、 
debounce 〈2.0 废 除 ) ~ trim 〈2.0 新 增 ) 这 些 修饰 
FF o 














3.1.3 v-if/v-else/v-show 





Vv-if/v-else/v-show 这 三 个 指令 主要 用 于 根据 条 
件 展示 对 应 的 模板 内 容 ， 这 在 第 2.3.2 小 节 的 泻 染 语 
法 中 也 进行 了 说 明 。v-if 和 v-show 的 主要 区 别 束 在 
于 ，v-if 在 条 件 为 false 的 情况 下 并 不 进行 模板 的 编 
译 ， 而 v-show 则 会 在 模板 编译 好 之 后 将 元 素 隐 藏 
掉 。v-if 的 切换 消耗 要 比 v-show 高 ， 但 初始 条 件 为 
false 的 情况 下 ，v-if 的 初始 演 染 要 稍 快 。 











3.1.4 v-for 


v-for 也 是 用 于 模板 泻 染 的 指令 ， 在 第 2.3.3 小 节 
列表 演 染 中 我 们 也 已 说 明 过 ， 这 里 就 不 再 敬 述 。 季 


见 用 法 如 下 : 


<ul> 
<li v-for='(index, item) in items'> 
<p>{{ item.name }}</p> 


</li> 
</ul> 





v-for 指 令 用 法 在 Vue.js 2.0 中 做 了 些 细微 的 调 
整 ， 大 致 包含 以 下 几 个 方面 : 
1. 参数 顺序 变化 
含 参数 imdex 或 key 时 ， 对 象 参数 修改 为 
Ea n BY (value, key) ， 这 样 与 JS Array 对 
象 的 新 方法 forEach 和 map， 以 及 一 些 对 象 迭 代 需 
《例如 lodash) 的 参数 能 保持 一 致 。 


2. v-bind:key 








属性 track-by 被 v-bind: key{t##, <div v- 
for="item in items" tranck-by="id"> 需 要 改写 
v-for="item in items" v-bind:key="item.id"> 


3. nin 10 


v-for="n in 10" 中 的 n 由 原来 的 0 一 9 欠 代 变 成 1 一 
101K 4K. 


3.1.5 v-on 


V-on 指 令 主要 用 于 事件 绑 定 ， 在 第 2.4 节 中 我 们 
己 经 说 明 。 回 顾 一 下 用 法 : 





<button v-on:click='onClick'></button> 





Vv-on 可 以 简写 为 : 


<button @click='onClick'></button> 





修饰 符 包 括 .stop、.prevent、.capture、.self 以 及 
指定 按键 .{keyCodelkeyAlias} 。 


在 Vue.js 2.0 中 ， 在 组 件 上 使 用 v-on 指 令 只 监听 








自 定义 事件 ， 即 使 用 $emit 触 发 的 事件 ， 如 果 要 监听 
原生 事件 ， 需 要 使 用 修饰 符 .native， 例 如 <my- 
component v-on:click.native="onClick"></my- 
component>. 


3.1.6 v-text 


v-text， 人 参数 类 型 为 String， 作 用 是 更 新 元 素 的 
textContent。{{}} 文 本 插值 本 里 也 会 被 编译 成 
textNode 的 一 个 v-text 指 令 。 而 与 直接 使 用 {{}} 不 同 
的 是 ，v-text 需 要 绑 定 在 某 个 元 素 上 ， 能 避免 未 编 
详 前 的 闪现 问题 。 例 如 : 











<span v-text="msg"></span> 





如 果 直 接 使 用 <span>{{msg}}</span>， 在 生命 
周期 beforeCompile 期 间 ， 此 刻 msg 数 据 尚 未 编译 到 
{{msg}} 中 ， 用 户 能 看 到 一 瞬间 的 {{msg}}， 然 后 内 
现 为 There is a message， 而 用 v-text 的 话 则 不 会 有 这 
个 问题 ， 如 图 3-1 所 示 。 


Te se ë 





Paused in debugger [Ph iy re O 
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图 3-1 


3.1.7 v-HIML 


v-HTML, 参数 类 型 为 String， 作用 为 更 新 元 素 
的 innerHITML ， 接 受 的 字符 串 不 会 进行 编译 等 操 
作 ， 按 普通 HTML 人 处 理 。 同 v-text 类 似 ，{{{}}} 插 值 
也 会 编译 为 节点 的 v-HTML 指 令 ，v-HTML 也 需要 
Ws 例 
H: 











<div>{{{HTML}}}</div> 
<div v-HTML="HTML"></div> 





3.1.8 v-el 

v-el 指 令 为 DOM 元 素 注册 了 一 个 索引 ， 使 得 我 
们 可 以 直接 访问 DOM 元 素 。 语 法 上 说 ， 可 以 通过 
所 属实 例 的 $els 属 性 调用 。 例 如 : 





<div v-el:demo>there is a el demo</div> 
vm.$els.demo.innerText // -> there is a el demo 





或 者 在 vm 内 部 通过 this 进 行 调 用 。 


另外 ， 由 于 HMTL 不 区 分 大 小 写 ， 在 vel 中 如 
果 使 用 了 驼峰 式 命名 ， 系 统 会 日 动 转 成 小 写 。 但 可 
以 使 用 “-? 来 连接 你 期 望 大 写 的 字母 。 例 如 : 








<div v-el:camelCase>There is a camelcase</div> 
<div v-el:camel-case>There is a camelCase</div> 
vm. $els.camelcase.innerText // -> There is a camelcase 
vm.$els.camelCase.innerText // -> There is a camelCase 





3.1.9 v-ref 





v-ref 指 令 与 Vv-el 类 似 ， 只 不 过 v-ref 作 用 于 子 组 
件 上 ， 实 例 可 以 通过 $refs 访 问 子 组 件 。 命 名 方式 也 
类 似 ， 想 使 用 驼峰 式 命 名 的 话 用 “-?* 来 做 连接 。 例 
如 : 


<message v-ref:title content="title"></message> 
<message v-ref:sub-title content="subTitle"></message> 
var Message = Vue.extend({ 

props : ['content'], 

template : '<h1>{{content}}</h1>' 


J) 


Vue.component('message', Message); 





我 们 最 终 将 vm.$refs.titte 和 vm.$refs.sSubTitle 用 
console.log 的 方式 打印 到 控制 台中 ， 结 果 为 : 


> VueComponent {$el: hl, $parent: Vue, $root: Vue, $children: Array[@], $refs: Object..} 


> VueComponent {$el: hl, Sparent: Vue, $root: Vue, $children: Array[@], $refs: Object..} 





输出 了 两 个 子 组 件 的 实例 。 


从 理论 上 来 说 ， 我 们 可 以 通过 父 组 件 对 子 组 件 
进行 任意 的 操作 ， 但 实际 上 尽量 还 是 会 采用 props 数 
据 绑 定 ， 用 组 件 间 通 信 的 方式 去 进行 逻辑 上 的 交 
互 ， 尽 量 让 组 件 只 操作 自己 内 部 的 数据 和 状态 ， 如 
果 组 件 间 有 通信 ， 也 通过 调用 组 件 暴 露出 来 的 接口 
进行 通信 ， 而 不 是 直接 跨 组 件 修改 数据 。 














3.1.10 v-pre 


v-presa SHX, Wie Wb A IK Th oe A 
TIR, WR EWH} Mustache, HRID 
编译 时 间 。 例如 : 








<div v-pre>{{ uncompiled}}</div> 
var vm = new Vue({ 
el : ‘#app', 
data: { 
uncompiled : ‘Thers is an uncompiled element' 


} 
}); 


里 


最 后 输出 : 





3.1.11 v-cloak 


Vv-cloak 指 令 相 当 于 在 元 素 上 添加 了 一 个 [v- 
cloak] 的 属性 ， 直 到 关联 的 实例 结束 编译 。 官 方 推 
荐 可 以 和 css 规 则 [v-cloak]{ display :none } 一 起 使 
用 ， 可 以 隐藏 未 编译 的 Mustache 标 签 直 到 实例 ;准备 


pincer 例如 : 


<div v-cloak>{{ msg }}</div> 


3.1.12 v-once 








v-oncefa Æ Vue. js 2.0 中 新 增 的 内 置 指 令 ， 用 
于 标明 元 素 或 组 件 只 泻 染 一 次 ， 即 使 随后 发 生 绑 定 
数据 的 变化 或 更 新 ， 访 元 系 或 组 件 及 包含 的 子 元 素 
都 不 会 再 次 被 编译 和 演 染 。 这 样 束 相当 于 我 们 明确 

















标注 了 这 些 元 系 不 需要 被 更 新 ， 所 以 v-once 的 作用 
是 最 大 程度 地 提升 了 更 新 行为 中 页 面 的 性 能 ， 可 以 
略 过 一 些 明确 不 需要 变化 的 步骤 。 使 用 方式 如 下 : 








<span v-once>{{msg}}</span> 
<my-component v-once :msg='msg'></my-component> 





3.2 目 定 义 指令 基础 


除了 内 置 指令 外 ，Vue.js 也 提供 了 方法 让 我 们 
可 以 注册 目 定义 指令 令 ， 以 便 封 装 对 DOM 元 素 的 重 
的 处 理 行为 ， 提 高 代码 复 用 率 。 本 小 节 主 要 说 明了 
如 何 创 建 、 注 册 目 定义 指令 ， 以 及 讲述 指令 的 相关 
属性 钩子 函数 ， 更 次 一 步 地 了 解 指 令 在 Vue.js 中 起 
到 的 作用 。 


3.2.1 指令 的 注册 


我 们 可 以 通过 Vue.directive(id, definition) 方法 
注册 一 个 全 局 自 定 义 指 令 ， 接 收 参 数 id 和 定义 对 
象 。id 是 指令 的 唯一 标识 ， 定 义 对 象 则 是 指令 的 相 
天 属性 及 钩子 函数 。 例 如 





Vue.directive(‘global-directive’, definition); // 我 
们 暂时 只 注册 了 这 个 指令 ， 并 没有 赋予 这 个 指令 任 
何 功能 


我 们 可 以 在 模板 中 这 么 使 用 : 


<div v-global-directive></div> 


pd 


而 除了 全 局 注册 指令 外 ， 我 们 也 可 以 通过 在 组 
件 的 directives 选 项 注册 一 个 局 部 的 目 定 义 指 令 。 例 
如 : 


var comp = Vue.extend({ 
directives : { 
‘localDirective’' : {} // 可 以 采用 驼峰 式 命 名 


} 
P; 





该 指令 束 只 能 在 当前 组 件 内 通过 v-local- 
directive 的 方式 调用 ， 而 无 法 被 其 他 组 件 调 用 。 


3.2.2 ”指令 的 定义 对 象 


我 们 在 注册 指令 的 同时 ， 可 以 传 入 definition 定 
义 对 象 ， 对 指令 赋予 一 些 特 殊 的 功能 。 这 个 定义 对 
象 主要 包含 三 个 钩子 函数 : bind. update 和 
unbind. 





bind: 只 被 调用 一 次 ， 在 指令 第 一 次 绑 定 到 元 
素 上 时 调用 。 


update: 指令 在 bind 之 后 以 初始 值 为 参数 进行 
第 一 次 调用 ， 之 后 每 次 当 绑 定 值 有 发 生变 化 时 调用 ， 
update 接 收 到 的 参数 为 newValue 和 oldValue 


unbind: 指令 从 元 系 上 解 绑 时 调用 ， 只 调用 一 
次 。 





这 三 个 函数 都 是 可 选 函 数 ， 但 注册 一 个 空 指令 
肯定 没有 意义 ， 来 看 下 面 这 个 例子 ， 会 使 我 们 对 整 
个 指令 周期 有 更 明确 的 认识 。 





<div v-if="isExist" v-my-directive="param"></div> 
Vue.directive('my-directive', { 
bind : function() { 
console.log('bind', arguments); 
Jo 
update : function(newValue, oldValue) { 
console.log('update', newValue, oldValue) 
Jo 
unbind : function() { 
console.log('unbind', arguments); 
} 
}) 


var vm = new Vue({ 
el : ‘#app', 
data : { 
param : 'first', 
isExist : true 
} 
})3 


C ýűE 


我 们 在 控制 台 里 先后 输入 vm.param ='second'#il 
vm.isExist = false， 整 体 输出 如 下 : 


FAP, WRT mE updater IN, FY 
以 直接 传 入 一 个 函数 代 蔡 定义 对 象 : 





Vue.directive('my-directive', function(value) { 
// 该 函数 即 为 update 函 数 
}); 





上 述 例子 中 ， 可 以 使 用 my-directive 指 令 绑 定 的 
值 是 data 中 的 param 属 性 。 也 可 以 直接 绑 定 字符 串 常 
量 ， 或 使 用 字面 修饰 符 ， 但 这 样 的 话 需要 注意 
update 方 法 将 只 调用 一 次 ， 因 为 普通 字符 串 不 能 啊 
应 数据 变化 。 例 如 : 








<div v-my-directive="constant string"/></div> // -> va 


lue 为 undefined， 因 为 data 中 没有 对 应 的 属性 

<div v-my-direcitve="'constant string'"></div> // -> va 

lue constant string， 绑 定 字 符 串 需要 加 单 引 号 

<div v-my-directive.literal="constant string"></div> // 
-> value 为 constant string， 利 用 字面 修饰 符 后 无 需 使 用 单 引 号 








除了 字符 串 外 ， 指 令 也 能 接受 对 象 字面 量 或 任 
意 合 法 的 JavaScript 表 达 式 。 例 如 : 
<div v-my-directive="{ title : 'Vue.js', author : 'You' 


}" ></div> 
<div v-my-directive="isExist ? 'yes' : 'no'" ></div> 

















注意 此 时 对 象 字 面 量 不 需要 用 单 引 号 括 起 来 ， 


这 和 字符 串 癌 量 不 一 样 。 
3.2.3 ”指令 实例 属性 


除了 了 解 指令 的 生命 周期 外 ， 还 需要 知道 指令 
中 能 调用 的 相关 属性 ， 以 便 我 们 对 相关 DOM 进 行 


操作 。 在 指令 的 钩子 函数 内 ， 可 以 通过 this 来 调用 
指令 实例 。 下 面 束 详细 说 明 指 令 的 实例 属性 。 


el: 指令 绑 定 的 元 素 。 


vm: 该 指令 的 上 下 文 ViiewModel， 可 以 为 new 
Vue0 的 实例 ， 也 可 以 为 组 件 实例 。 


expression: 指令 的 表达 式 ， 不 包括 参数 和 过 
UEAN o 


arg: 指令 的 参数 。 
name: 指令 的 名 字 ， 不 包括 Vv- 前 级 。 


modifiers: 一 个 对 象 ， 包 含 指 令 的 修饰 符 。 








我 们 可 以 通过 以 下 这 个 例子 ， 更 耳 观 地 了 解 到 
这 些 属性 : 





<div v-my-msg:console. log="content"></div> 
Vue.directive('my-msg', { 
bind : function() { 
console. log ( ' ~.nnnnnnnnn bind~~~~~~~~~~~~~ DF 
console.log('el', this.el); 
console.log('name', this.name); 
console.log('vm', this.vm); 


console.log('expression', this.expression) ; 
console.log('arg', this.arg); 
console.log('modifiers', this.modifiers) ; 
console.log('descriptor', this.descriptor) ; 

Jo 

update : function(newValue, oldValue) { 
var keys = Object.keys(this.modifiers); 
window[this.argl][keys[8]] (newValue); 

Ja 

unbind : function() { 

} 

}); 


var vm = new Vue({ 
el : '#app', 
data : { 
content : 'there is the content' 





输出 结果 如 下 : 


Po b in d ee ee ee a 3 E. 1 = tm L e 3 9 
el div /div 1.html:408 
name my-msg 3.1.html:41 
vm 3ci. tml:42 
> Vue {Sel: div#app, Sparent: , Sroot: Vue, S$children: Array[@], 


$refs: Object..} 





expression content 1. html :43 
arg console 3.1.html:44 
modifiers Object {log: true 1.html:4 
descriptor 1.html:46 
b Object {name: "my-msg", attr: “v-my-msg:console.log", raw: “content”, def: 
Object, arg console"...} 
a | 


3.2.4 元素 指令 


元 素 指 令 是 Vue.js 的 一 种 特殊 指令 ， 普 通 指 令 
需要 绑 定 在 某 个 具体 的 DOM 元 素 上 ， 但 元 素 指令 
可 以 单独 存在 ， 从 使 用 方式 上 看 更 像 是 一 个 组 件 ， 
但 本 和 喘 内 部 的 实例 属性 和 钩子 函数 是 和 指令 一 怪 
的 。 例 如 : 





<div v-my-directive></div> // -> 普通 指令 使 用 方式 
<my-directive></my-directive> // -> 元素 指令 使 用 方式 











元 素 指令 的 注册 方式 和 普通 指令 类 似 ， 也 有 全 
局 注册 和 局 部 注册 两 种 。 


Vue.elementDirective('my-ele-directive') // 全 局 注册 方式 
var Comp = Vue.extend({ // 局 部 注册 ， 仅 限 该 组 件 内 使 用 
… // 省 略 了 其 他 参数 
elementDirectives : { 
‘eleDirective' : {} 


} 
})s 


Vue.component('comp', Comp); 





元 素 指 令 不 能 接受 参数 或 表达 式 ， 但 可 以 读 取 


元 素 特 性 从 而 决定 行为 。 而 且 当 编译 过 程 中 过 到 一 
个 元 条 指令 时 ，Vue.js 将 忽略 该 元 素 及 其 子 元 系 ， 
只 有 元 素 指 令 本 里 才 可 以 操作 该 元 系 及 其 子 元 素 。 


Vue.js 2.0 中 取消 了 这 个 特性 ， 推 荐 使 用 组 件 来 


实现 需要 的 业务 。 








3.3 ”指令 的 高 级 选项 


Vue.js 指令 定义 对 象 中 除了 钩子 函数 外 ， 还 有 
一 些 其 他 的 选项 ， 我 们 将 在 本 节 中 对 其 做 逐个 的 讲 








3.3.1 params 
定义 对 象 中 可 以 接受 一 个 params 数 组 ，Vue.js 


编译 器 将 自动 提取 上 自 定义 指令 绑 定 元 素 上 的 这 些 属 
性 。 例 如 : 





<div v-my-advance-directive a="paramA"></div> 
Vue.directive('my-advance-directive', { 
params : ['a'], 
bind : function() { 
console.log('params', this.params) ; 


} 
F) 








除了 直接 传 入 数值 外 ，params 文 持 绑 定 动 态 数 
据 ， 并 且 可 以 设 定 一 个 watcher 监 听 ， 当 数据 变化 


时 ， 会 调用 这 个 回调 函数 。 例 如 : 


<div v-my-advance-directive v-bind:a="a"></div> 
// 当然 也 可 以 简写 成 <div v-my-advance-directive :a="a">< 
/div> 
Vue.directive( 'my-advance-directive', { 

params : ['a'], 

paramWatchers : { 

a : function(val, oldVal) { 
console.log('watcher: ', val, oldVal) 


l 


}s 
bind : function() { 
console.log('params', this.params) ; 


} 
}); 


var vm = new Vue({ 
el : '#app', 
data : { 
a : 'dynamitc data' 
} 
})3 





3.3.2 deep 


当 目 定义 指令 作用 于 一 个 对 象 上 时 ， 我 们 可 以 
使 用 deep 选 项 来 监听 对 象 凡 部 及 生 的 变化 。 例 如 : 


<div v-my-deep-directive="obj"></div> 
<div v-my-nodeep-directive="o0bj"></div> 
Vue.directive('my-deep-directive', { 
deep : true, 
update : function(newValue, oldValue) { 
console.log('deep', newValue.a.b); 
} 
}); 
Vue.directive('my-nodeep-directive', { 
update : function(newValue, oldValue) { 
console.log('deep', newValue.a.b); 
} 
}); 


var vm = new Vue({ 
el : ‘#app', 
data : { 
obj : 





运行 后 ， 在 控制 台中 输入 vm.obj.a.b = 'inner 
changed', 只 有 my-deep-directive 调 用 Y update ek) 2, 
输出 了 改变 后 的 值 。 





vm.obj.a.b = ‘inner changed’ 
deep inner changed 
“inner changed" 


Vue.js 2.0 中 废弃 了 该 选项 。 


3.3.3 twoWay 


在 自 定义 指令 中 ， 如 末 需 要 问 Vue 实 例 写 回 数 
据 ， 就 需要 在 定义 对 象 中 使 用 twoWay:true， 这 样 可 
以 在 指令 中 使 用 this.set(value) 来 写 回 数据 。 











<input type="text" v-my-twoway-directive="param" / > 
Vue.directive('my-twoway-directive', { 
twoWay : true, 
bind : function() { 
this.handler = function () { 
console.log('value changed: ', this.el.value); 
this.set(this.el.value) 
}.bind(this) 
this.el.addEventListener(‘input', this.handler) 
Jo 
unbind: function () { 
this.el.removeEventListener('input', this.handler) 
} 
})3 


var vm = new Vue({ 
el : ‘#app', 
data : { 
param : 'first', 


} 


DE 


此 时 在 input 中 输入 文字 ， 然 后 在 控制 台中 输入 
vm.param 即 可 观察 到 实例 的 param 属 性 已 被 改变 。 








LUe nged: 
lue changed: 
Lue anged 23 
Lue anges 231 
lue ngei 2312 
Lue change 23123 
i. para 

"123123" 


fet ee, WRIA WEtwoWay:true, Wè 
在 目 定 义 指令 中 调用 this.set(), Vue.js& pu tt FFF - 





O > [Vue warn]: Directive.set() can only be used inside 
twoWaydirectives. 


3.3.4 acceptStatement 


选项 acceptStatement:true 可 以 允许 自 定 义 指 令 
接受 内 联 语 句 ， 同 时 update 函 数 接收 的 值 是 一 个 函 
数 ， 在 调用 该 函数 时 ， 它 将 在 所 属实 例 作 用 域内 运 
位 





<div v-my-directive="i++"></div> 


Vue.directive('my-directive', { 
acceptStatement: true, 
update: function (fn) { 

} 

}) 


var vm = new Vue({ 
el : '#app', 
data : { 
i :0 


} 
})s 





如 果 在 update 函 数 中 ， 运 行 和 0， 则 会 执行 内 
联 语 句 i++， 此 时 vm.i = 1。 但 更 改 vm.i 并 不 会 触发 
update PÁ žit. 


需要 当心 的 是 ， 如 果 此 时 没有 设 定 
acceptStatement: true， 该 指令 会 陷入 一 个 死 循环 
中 。v-my-statement-directive 接 受到 i 的 值 每 次 都 在 
变化 ， 会 重复 调用 update 函 数 ， 最 终 导 致 Vue.j$ 抛 出 


已 A 
开 吊 。 








3.3.5 terminal 





选项 terminal 的 作用 是 阻止 Vue.js 裔 历 这 个 元 素 
及 其 内 部 元 素 ， 并 由 该 指令 本 身 去 编译 绑 定 元 素 及 
其 内 部 元 素 。 内 置 的 指令 v-if 和 v-for 都 是 terminal 指 


fe) 


4 


使 用 terminal 选 项 是 一 个 相对 较为 复杂 的 过 
程 ， 你 需要 对 Vue.js 的 编译 过 程 有 一 定 的 了 解 ， 这 
里 借助 官网 的 一 个 例子 来 大 致 说 明 如 何 使 用 


terminal. 











<div id="modal"></div> 


<div v-inject:modal> 
<hi>header</h1> 
<p>body</p> 
<p>footer</p> 
</div> 
var FragmentFactory = Vue.FragmentFactory // Vue.js 全 局 
API， 用 来 创造 fragment 的 工厂 函数 ，fragment 中 包含 了 有 具体 的 sco 
pe 和 DOM 元 隶 ， 可 以 看 成 一 个 独立 的 组 件 或 者 实例 。 
var remove = Vue.util.remove // Vue.Jjs 工 具 类 函数 ， 移 除 D0 
M 元 素 
var createAnchor = Vue.util.createAnchor // 创建 锚 点 ， 
锚 点 在 debug 模 式 下 是 注释 节点 ， 非 debug 模 式 下 是 文本 节点 ， 主 要 作 
用 是 标记 dom 元 系 的 插入 和 移 除 
Vue.directive('inject', { 
terminal: true, 
bind: function () { 
var container = document.getElementById(this.arg) / 
/ 获取 需要 注入 到 的 DOM 元 素 
this.anchor = createAnchor('v-inject') // 创建 v-inj 
ect 锚 点 
container.appendChild(this.anchor) // 销 点 挂 载 到 注入 
市 点 中 
remove(this.el) // 移 除 指令 绑 定 的 元 素 
var factory = new FragmentFactory(this.vm, this.el) 











// 创建 fragment 
this.frag = factory.create(this. host, this. scope, 
this. frag) 
// this._host 用 于 表示 存在 内 容 分 发 时 的 父 组 件 
// this._scope 用 于 表示 存在 v-for 时 的 作用 域 
// this._frag 用 于 表示 该 指令 的 父 fragment 
this.frag.before(this.anchor) 
Jo 
unbind: function () { 
this.frag.remove() 
remove(this.anchor) 








终 我 们 得 到 的 结 末 古 : 


v<div id="modal'> == $0 


最 





hi>header</h1 
p>body</p 
p>footer</p 
/div 
/div 
/div 


3.3.6 priority 


选项 priority 即 为 指定 指令 的 优先 级 。 普 通 指令 
默认 是 1000，termial 指 令 默 认为 2000。 同 一 元 素 上 
优先 级 高 的 指令 会 比 其 他 指令 处 理 得 早 一 些 ， 相 同 
优先 级 则 按 出 现 顺序 依次 处 理 。 以 下 为 内 置 指令 优 





先 级 顺序 : 


ON = 700 

MODEL = 800 

BIND = 850 
TRANSITION = 1100 
EL = 1500 
COMPONENT = 1500 
PARTIAL = 1750 


IF = 2100 
FOR = 2200 
SLOT = 2300 





3.4 指令 在 Vue.js 2.0 中 的 变化 


由 于 指令 在 Vue.js2.0 中 发 生 了 比较 大 的 变化 ， 
所 以 本 市 单独 来 说 明 下 这 些 情况 。 忌 得 来 说 ， 
Vue.js 2.0 中 的 指令 功能 更 为 单一 ， 很 多 和 组 件 重复 
的 功能 和 作用 部 进行 了 删除 ， 指 令 也 更 专注 于 本 号 
作用 域 的 操作 ， 而 尽量 不 去 影响 指令 外 的 DOM 元 
素 及 数据 。 


3.4.1 ”新 的 钧 子 函数 


钧 子 函 数 增加 了 一 个 componentUpdated， 当 上 整 
个 组 件 都 完成 了 update 状 态 后 即 所 有 DOM 都 更 新 后 
调用 该 钩子 函数 ， 无 论 指令 接受 的 参数 是 否 友 生变 
化 。 




















3.4.2 ”钩子 函数 实例 和 参数 变化 


在 Vue.js 2.0 中 取消 了 指令 实例 这 一 概念 ， 即 在 
钧 子 函数 中 的 this 并 不 能 指向 指令 的 相关 属性 。 指 
令 的 相关 属性 均 通 过 参数 的 形式 传递 给 钩子 函数 。 








Vue.directive('my-directive', { 
bind : function(el, binding, vnode) { 
console. 1log( 'wn.nnnn000 bind~~~~~~~~~ DF 


console.log('el', el); 
console.log('binding', binding); 
console.log('vnode', vnode); 


Jo 
update : function(el, binding, vnode, oldVNode) { 


Jo 
componentUpdated(el, binding, vnode, oldVNode) { 


J 


unbind : function(el, binding, vnode) { 


} 
DF 





annann indan 

el : 

NE 

binding > Object {name: "my-directive", value: "first", expression: "param", modifiers: Object} 
, de a + hi 

vnod VNode {tag: data: Object, ch e a 2 


在 Vue.js 1.0 的 实例 中 的 属性 大 部 分 都 能 在 
binding 中 找到 ，vnode 则 主要 包含 了 节点 的 相关 信 
IX, A AMF fragment) H - 


3.4.3 update 函数 触发 变化 


EIT pki Mupdatex} tÉ Vue.js 1.0 也 有 了 以 下 两 点 
变化 : 


O 指令 绑 定 bind 函 数 执行 后 不 直接 调用 update 
pRB o 


D RAAT RAZ, FUE ASIN A 
RAAB, IRM H update pk žir. me R 过 滤 不 
必要 的 更 新 ， 则 可 以 使 用 binding.value == 
binding.oldValue 来 判断 。 


3.4.4 ”参数 binding 对 象 


钩子 函数 接受 的 参数 binding 对 象 为 不 可 更 改 ， 
强行 设 定 binding.value 的 值 并 不 会 引起 实际 的 改 
动 。 如 果 非 要 通过 这 种 方式 进行 修改 的 话 ， 只 能 通 
过 el 直接 修改 DOM 元 素 。 








第 4 章 ”过 滤器 


在 第 2 章 文 本 插值 中 我 们 提 到 过 ，Vue.js 人 允许 在 
表达 式 后 面 添加 可 选 的 过 滤 堪 ， 以 管道 符 表 示 ， 例 
如 : 


{{ message | capitalize }} 


过 滤 右 的 本 质 是 一 个 函数 ， PSC IETS BTA 
值 作为 初始 值 ， 同 时 也 能 接受 额外 的 参数 ， 返 回 值 
为 经 过 处 理 后 的 输出 值 。 多 个 过 滤器 也 可 以 进行 串 
联 。 例 如 : 





{{ message | filterA 'arg1' 'arg2' }} 
{{ message | filterA | filterB}} 





我 们 也 列举 了 Vue.js 1.0 中 内 置 的 指令 来 说 明 其 
作用 ， 本 章 则 主要 来 讲 如 何 注 册 和 使 用 自 定义 过 滤 
até 


4.1 过 小 部 注册 


Vue.js 提 供 了 全 局 方法 Vue.filter0 注 册 一 个 目 定 
Myst, PSC YEAS IDA LHe Bw MC RH. 
例如 : 








Vue.filter('date', function(value) { 
if(!value instanceof Date) return value; 
return value.toLocaleDateString(); 


}) 








REM LS RAIDO Evm A AL 
中 使 用 这 个 过 滤 胡 了 。 


<div> 
{{ date | date }} 
</div> 
var vm = new Vue({ 
el : ‘#app', 
data: { 
date : new Date() 


} 
}); 





除了 初始 值 之 外 ， 过 滤 硕 也 能 接受 任意 数量 的 
参数 。 例 如 : 


Vue.filter('date', function(value, format) { 
var o = { 
"M+": value.getMonth() + 1, //Aftt 
"d+": value.getDate(), //H 
"h+": value.getHours(), ///) iN 
: value.getMinutes(), //7 
: value.getSeconds(), //#> 


le 


if (/(yt+)/.test(format) ) 
format = format.replace(RegExp.$1, (value.getFullYe 
ar() + "").substr(4 - RegExp.$1.length)); 
for (var k in o) 
if (new RegExp("(" + k + ")").test(format) ) 
format = format.replace(RegExp.$1, (RegExp.$1.len 
gth == 1) 
? (o[k]) 
: (("00" + o[k]).substr(("" + o[k]).length))); 
return format; 


}); 








使 用 方式 即 为 : 





<div> 
{{ date | date 'yyyy-MM-dd hh:mm:ss'}} //-> 2016-08- 


10 09:55:35 即 可 按 格式 输出 当前 时 间 


</div> 


4.2 双 回 过 滤 堪 


之 前 提 及 的 过 滤 喜 都 是 在 数据 输出 到 视图 之 
前 ， 对 数据 进行 转化 显示 ， 但 不 影响 数据 本 坊 。 
Vue.js 也 提供 了 在 改变 视图 中 数据 的 值 ， 写 回 data 绑 
定 属性 中 的 过 滤 占 ， 称 为 双 辣 过 小 副 。 例 如 : 








<input type="text" v-model="price | cents" > 
// 该 过 滤器 的 作用 是 处 理 价钱 的 转化 ， 一 般 数 据 库 中 保存 的 单位 都 
为 分 ， 避 免 浮 点 运算 
Vue.filter('cents', { 
read : function(value) { 
return (value / 10@).toFixed(2); 
Jo 
write : function(value) { 
return value * 100; 
} 
})3 


var vm = new Vue({ 
el : ‘#app', 
data: { 
price : 150 
} 
})5 





MELTS AIT BER AL, OTA DY ane PE 2 Be 





中 提 到 的 计算 属性 有 点 雷同 。 而 Vue.js 2.0 中 也 取 
消 了 过 滤器 对 v-model、v-on 这 些 指令 的 支持 ， 认 为 
会 导致 更 多 复杂 的 情况 ， 而 且 使 用 起 来 并 不 方便 。 
所 以 Vue.js 2.0 中 只 人 允许 开发 者 在 {{f}} 标 签 中 使 用 过 
滤器 ， 像 上 述 对 写 操作 有 转化 要 求 的 数据 ， 建 议 使 
用 计算 属性 这 一 特性 来 实现 。 





4.3 ”动态 参数 


过 滤器 除了 能 接受 单 引 号 〈") 括 起 来 的 参数 
外 ， 也 文 持 接受 在 vm 实 例 中 绑 定 的 数据 ， 称 之 为 动 
人 态 参 数 。 使 用 区 别 就 在 于 不 需要 用 单 引 号 将 参数 括 
起 来 。 例 如 : 














<input type="text" v-model="price" /> 
<span>{{ date | dynamic price }}</span> 


Vue. filter('dynamic', function(date, price) { 
return date.toLocaleDateString() + ' : ' + price; 
})5 
var vm = new Vue({ 
el : ‘#app', 
data: { 
date : new Date(), 
price : 150 


} 
})s 





过 滤器 中 接受 到 的 price 参 数 即 为 vm.price。 





4.4 过 滤器 在 Vue.js 2.0 中 的 变化 


过 滤器 在 Vue.js 2.0 中 也 发 生 了 一 些 变化 ， 大 致 
说 明 如 下 : 


O 取消 了 所 有 内 置 过 滤 堪 ， 即 capitalize， 
uppercase, json 等 。 作 者 建议 尽量 使 用 单独 的 插件 来 
按 需 加 入 你 所 需要 的 过 滤器 。 不 过 如 有 果 你 觉得 仍然 
想 使 用 这 些 Vue.js 1.0 中 的 内 置 过 滤器 ， 也 不 是 什么 
难 办 的 事 。1.0 产 人 码 filters/ 目 录 下 的 index.js 和 array- 
filter.js 中 就 是 所 有 内 置 过 滤器 的 源码 ， 你 可 以 挑选 
你 想 用 的 手动 加 a 到 2.0 中 。 


D 取消 了 对 v-model 和 v-on 的 支持 ， 过 滤器 只 
能 使 用 在 {{}} 标 签 中 。 


O 修改 了 过 小 器 参数 的 使 用 方式 ， 采 用 也 数 的 
形式 而 不 是 空格 来 标记 参数 。 例 如 : {{ date | 
date(‘yyyy-MM-da’') }}。 


























P5 È 


过 渡 系 统 是 Vue.js 为 DOM 动 画 效 果 提 供 的 一 个 
特性 ， 它 能 在 元 素 从 DOM 中 插入 或 移 除 时 触发 你 
的 CSS 过 渡 〈transition ) 和 动画 (animation) ， 也 
束 是 说 在 DOM 元 系 发 生变 化 时 为 其 添加 特定 的 cdlass 
类 名 ， 从 而 产生 过 渡 效 果 。 除 了 CSS 过 滤 外 ， 
Vue.js 的 过 渡 系 统 也 文 持 javascript 的 过 渡 ， 通 过 又 
露 过 渡 系 统 的 钩子 函数 ， 我 们 可 以 在 DOM 变 化 的 
特定 时 机 对 其 进行 属性 的 操作 ， 产 生动 男 效 果 。 

















5.1 CSS 过渡 
本 小 节 首 先 来 了 解 下 CSS 过 渡 的 用 法 。 


5.1.1 CSS 过 渡 的 用 法 
首先 举 一 个 例子 来 说 明 CSS 过 渡 系 统 的 使 用 方 


N 





<div v-if="show" transition="my-startup"></div> 
var vm = new Vue({ 
el : '#app', 
data: { 
show : false 


} 
}); 





首先 在 模板 中 用 transition 绑 定 一 个 DOM 元 素 ， 
并 且 使 用 v-if 指 令 使 元 素 先 处 于 未 被 编译 状态 。 然 
后 在 控制 台 内 手动 调用 vm.show = true, iF) UA FI 
DOM 元 系 最 后 输出 为 : 











<div class="my-startup-transition"></div> 


Ooo O 


我 们 可 以 看 到 在 DOM 元 素 完成 编译 后 ， 过 渡 
系统 上 自动 给 元 素 添 加 了 一 个 my-startup-transition 的 
class 类 名 。 那 么 为 了 让 这 个 效果 更 明显 一 点 ， 还 可 
以 提前 给 这 个 类 名 添加 一 点 CSS 样 式 : 








.my-startup-transition { 
transition: all 1s ease; 
width: 100px; height: 100px; 
background: black; 


Opacity: 1; 








此 时 再 重新 刷新 并 手动 运行 vm.show = true, K 
现 最 终 样 式 效果 是 加 载 上 去 了 ， 但 并 没有 出 现 
transition 的 效果 。 这 是 由 于 在 编译 v-if 后 ，div 直 接 
挂 载 到 body 并 添加 my-startup-transition 类 名 这 两 个 
过 程 中 浏览 器 仪 进行 了 一 次 重 绘 ， 这 对 于 div 来 说 并 
没有 产生 属性 的 更 新 ， 所 以 没有 执行 css transition 的 
效果 。 为 了 解决 这 个 问题 ，Vue.js 的 过 渡 系 统 给 元 
素 插 入 及 移 除 时 分 别 深 加 了 2 个 类 名 : *-enter 和 *- 
leave，*# 即 为 transition 绑 定 的 字符 串 ， 本 例 中 即 为 
my-startup。 所 以 ， 在 上 述 例子 中 ， 我 们 还 需要 添 








加 两 个 类 名 样式 ， 即 my-startup-enter, my-startup- 
leave: 


.my-startup-enter, .my-startup-leave{ 
height: Opx; 
Opacity: Q; 


} 








此 时 再 重复 之 前 的 操作 ， 束 可 以 看 到 过 渡 效 果 
了 。 和 需要 注意 的 是 ， 这 两 个 类 名 的 优先 级 需要 局 
于 .my-startup-transition， 不 然 被 my-startup-transition 


敌 羡 后 就 失效 了 。 


同样 ， 我 们 也 可 以 通过 CSSs 的 animation 属 性 来 
实现 过 渡 的 效果 ， 例 如 : 





<style> 

.my-animation-transition { 
animation: increase 1s ease @s 1; 
width: 100px; 
height: 10@px; 
background: black; 

} 

.my-animation-enter, .my-animation-leave { 
height: Opx; 

} 

@keyframes increase { 
from { height: @px; } 


to { height: 10@px; } 
</style> 
<div v-if="animation" transition="my-animation" >animati 


on</div> 


var vm = new Vue({ 


el : ‘#app', 
data: { 
animation : false 
} 
}); 





同样 ， 更 改 vm.animation 为 true 后 即 可 看 到 过 波 








除了 直接 在 元 素 上 添加 transition="name" 外 ， 
Vue.js 也 支持 动态 绑 定 CSS 名 称 ， 可 用 于 元 素 需要 
多 个 过 渡 效 果 的 场景 。 例 如 : 











<div v-if="show" v-bind:transition=" transitionName"></ 
div> 
// 也 可 以 简写 成 
<div v-if="show" :transition="transitionName"></div> 
var vm = new Vue({ 
el: '#app', 
data: { 
show: false, 
transitionName: 'fade' 


} 


}); 


Vue.js 本 映 并 不 提供 内 置 的 过 小 CSS 样 式 ， 仅 
仅 是 提供 了 过 波 需 要 便 用 的 样式 的 加 载 或 移 除 时 
机 ， 这 样 更 便于 我 们 灵活 地 按 需 去 设计 过 小 样式 。 


5.1.2 CSS HT A ži 


Vue.js 提 供 了 在 插入 或 DOM 元 素 时 类 名 变化 的 
钩子 函数 ， 可 以 通过 Vue.transition('name', {}) HY 77 
式 来 执行 具体 的 函数 操作 。 例 如 : 








Vue.transition('my-startup', { 

beforeEnter: function (el) { 
console.log('beforeEnter', el.className) ; 

Jo 

enter: function (el) { 
console.log('enter', el.className); 

Jo 

afterEnter: function (el) { 
console.log('afterEnter', el.className); 

Jo 

enterCancelled: function (el) { 
console.log('enterCancelled', el.className); 

Jo 

beforeLeave: function (el) { 
console.log('beforeLeave', el.className); 


J 


leave: function (el) { 
console.log('leave', el.className) ; 

Jo 

afterLeave: function (el) { 
console.log('afterLeave', el.className); 

Jo 

leaveCancelled: function (el) { 
console.log('leaveCancelled', el.className); 





在 控制 台 里 执行 vm.show = true， 输 出 结果 如 
下 : 


vm.show = true 

beforeEnter my-—startup-—transition 

enter my-startup-transition my-startup-—enter 
true 

afterEnter my-startup-transition 


这 样 ， 我 们 能 很 清楚 地 看 到 钓 子 函数 执行 的 顺 
序 以 及 元 素 类 名 的 变化 。 同 样 的 ， 还 可 以 再 次 更 改 
vm.show 的 值 置 为 false， 结 果 如 下 : 


vm.show = false 

beforeLeave my-startup-transition 

leave my-startup-transition my-startup—Leave 
false 

afterLeave my-startup-—transition 


> 


由 于 元 素 在 使 用 CSS 的 transition 和 animation 
时 ， 系 统 的 流程 不 完全 一 样 。 所 以 先 以 transition 为 
il, EZR PRE AAU. 

“4vm.show = truely, 

1) il FA beforeEnter ek ZY 

(2) 添加 enter 类 名 到 元 素 上 。 

O 将 元 素 插入 DOM 中 。 

(4) 调用 enter 函 数 。 


©) 强制 reflow 一 次 ， 然 后 移 除 enter 类 名 ， 触 发 
过 渡 效 果 。 


6) 如 果 此 时 元 际 被 删除 ， 则 触发 enterCancelled 
PKI A o 


@) 监听 transitionend 事 件 ， 过 小 结束 后 调用 
afterEnter PKI 2 « 


~“4vm.show = false F}, 


1) Jl FAbeforeLeave KI. 


(2) 添加 v-leave 类 名 ， 触 发 过 渡 效 果 。 
(3) Wil Hleave pk ži. 


4) GORI roe RU fi A 
leaveCancelled K 2X 


© 监听 transitionend 事 件 ， 删 除 元 素 及 *-leave 
类 和 名。 

© iil afterLeave pk 2X 

如 果 使 用 animation 作 为 过 渡 的 话 ， 在 DOM 插 


入 时 ，*-enter 类 名 不 会 立即 被 删除 ， 而 是 在 
animationend 事 件 触 发 式 删 除 。 


另外 ，enter 和 1leave 函 数 都 有 第 二 个 可 选 的 回调 
参数 ， 用 于 控制 过 渡 何 时 结束 ， 而 不 是 监听 
transitionend 和 animationend 事 件 ， 例 如 ; 








<style> 
my-done-transition { 
transition: all 2s ease; 
width: 100px; height: 100px; 
background: black; 
Opacity: 1; 


.my-done-enter, .my-done-leave{ 
height: Opx; 


Opacity: Q; 


</style> 
Vue.transition('my-done', { 
enter: function (el, done) { 
this.enterTime = new Date(); 
setTimeout(done, 500); 
}s 
afterEnter: function (el) { 
console.log('afterEnter', new Date() - this.enterTi 
me) ; 
} 
}) 
var vm = new Vue({ 
el : ‘#app', 
data: { 
done : false 


} 
F); 





此 时 afterEnter 函 数 执 行 的 时 间 就 不 是 my-done- 
transition 样 式 中 的 2s 之 后 ， 而 是 done 调 用 的 500ms 之 
后 。 需 要 注意 的 是 ， 如 果 在 enter 和 leave 中 声明 了 形 
参 done， 但 没有 调用 ， 则 不 会 触 友 afterEnter 函 数 。 





5.1.3 ”显示 声明 过 小 类 型 


Vue.js 可 以 指定 过 滤 元 素 监听 的 结束 事件 的 类 
型 ， 例如 : 


Vue.transition('done-type', { 
type: ‘animation' 


}) 





HERT Vue. jsi K UTICA HY animationend 34, 
避免 元 素 上 还 存在 transition 时 导致 的 结束 事件 触发 
不 一 致 。 


5.1.4 目 定 义 过 小 类 名 


除了 使 用 默认 的 类 名 *-enter, *-leave 外 ，Vue.js 
也 允许 我 们 自 定义 过 渡 类 名 ， 例 如 : 


Vue.transition('my-startup', { 
enterClass: 'fadeIn', 
leaveClass: ‘fadeOut' 


}) 





我 们 可 以 通过 上 述 钩子 函数 的 例子 ， 观 测 元 和 隶 
的 类 名 变化 : 


vm. show = true 
beforeEnter my-startup-transition 
enter my-startup-transition fadeIn 
true 

rEnter my- tup-transition 
vm. show = fals 
beforeLeave my-startup-—transition 
leave my-startup-transition fadeOut 
false 


afterLeave my-startup-transition 


Vue.js 官 方 推 荐 了 一 个 CSS 动 画 库 ， 
animate.css， 配 合 目 定义 过 渡 类 名 使 用 ， 可 以 达到 
非常 不 错 的 效果 。 只 需要 引入 一 个 CSS 文 
件 ，http://cdn.bootcss.com/animate.css/3.5.2/animate.n 


， 束 可 以 使 用 里 面 的 预 设 动画 。 例 如 : 





<div v-if="animateShow" class="animated" transition="bo 
unce">bounce effect</div> 
Vue.transition('bounce', { 

enterClass: ‘'bouncelIn', 


leaveClass: ‘bounceOut' 


}) 





在 使 用 animate.css 时 ， 需 要 先 给 元 素 附 上 
animated 类 名 ， 然 后 再 添加 预 设 的 动 效 类 名 ， 例 如 


上 例 中 的 bounceIn、bounceOut， 这 样 就 能 看 到 动画 
效果 。 这 个 库 提供 了 多 种 强调 展示 【例如 弹性 、 拌 
动 )、 泊 入 渐 出 、 翻 转 、 旋 转 、 放 大 缩小 等 效果 。 
所 有 的 效果 可 以 访问 官方 网 

址 https://daneden.github.io/animate.css/ 在 线 观 看 。 





5.2 JavaScript ye 





Vue.js 也 可 以 和 一 些 JavaScript 动 男 库 配 合 使 
H, KER AAH JavaScript ŽOG TA m 
定义 CSS 样 式 。transition 接 受 选 项 css:false， 将 直接 
跳 过 CSS 检 测 ， 避 人 免 CSS 规 则 干扰 过 渡 ， 而 且 需 要 
在 enter 和 ]eave 和 钩子 函数 中 调用 done 了 函数， 明确 过 渡 
结束 时 间 。 此 处 将 引入 Velocity.js 来 配合 使 用 
JavaScript 过 渡 。 


5.2.1 Velocity.js 


Velocity.js 是 一 球 高 效 的 动画 引擎 ， 可 以 单独 
使 用 也 可 以 配合 jQuery 使 用 。 它 拥有 和 jQuery 的 
animate 一 样 的 api 接 口 ， 但 比 jQuery 在 动画 处 理 方面 
更 强大 、 更 流畅 ， 以 及 模拟 了 一 些 现实 世界 的 运 
动 ， 例 如 弹性 动画 等 。 


Velocity.js 可 以 当做 jQuery 的 插件 使 用 ， 例 如 : 











$element.velocity({ left: "10@px"}, 500, "swing", funct 
ion(){console.log("done") }); 
gelement.velocity({ left: "1@@px"}, { 

duration: 500, 

easing: "Swing", 

complete : function(){console.log("done") ; } 


}); 


也 可 以 单独 使 用 ， 例 如 ; 


var el = document .getElementById(id ; 
Velocity(el, { left : '10@px' }, 500, 'swing', done); 





5.2.2 JavaScript ží H 


我 们 可 以 通过 以 下 方式 注册 一 个 目 定 义 的 
JavaScript 过 渡 : 








<style> 
.my-velocity-transition { 

position: absolute; top:Opx; 

width: 100px; height: 100px; 

background: black; 
} 
</style> 
<div v-if="velocity" transition="my-velocity"></div> 
Vue.transition('my-velocity', { 

css : false, 

enter: function (el, done) { 

Velocity(el, { left : '100px' }, 500, ‘swing', done 


); 


Jo 
enterCancelled: function (el) { 
Velocity(el, 'stop'); 
leave: function (el, done) { 
Velocity(el, { left : '@px' }, 500, 'swing', done); 


leaveCancelled: function (el) { 
Velocity(el, 'stop'); 





运行 上 述 代码 ， 在 设置 vm.velocity = true 后 ， 
过 渡 系 统 即 会 调用 enter 钧 子 函 数 ， 通 过 Velocity 对 





DOM 操 作 展 现 动 画 效 末 ， 然 后 强制 调用 done 函 数 ， 
明确 结束 过 小 效果 。 


5.3 ”过 渡 系 统 在 Vue.js 2.0 中 的 变 
化 





过 渡 系 统 在 Vue.js 2.0 中 也 发 生 了 比较 大 的 变 
化 ， 借 鉴 了 ReactJS CSSTransitionGroup 的 一 些 相 关 
设 定 和 命名 。 
5.3.1 用 法 变化 


新 的 过 渡 系 统 中 取消 了 v-transition 这 个 指令 ， 
新 增 了 名 为 transition 的 内 置 标签 ， 用 法 变更 为 : 


<transition name="fade"> 
<div class="content" v-if="show">content</div> 
</transition> 





transition 标 签 为 一 个 抽象 组 件 ， 并 不 会 额外 泻 
染 一 个 DOM 元 系 ， 仪 仅 是 用 于 包 里 过 渡 元 系 及 触 
发 过 渡 行 为 。v-if、v-show 等 指令 仍旧 标记 在 内 容 
元 素 上 ， 并 不 会 作用 于 transition 标 签 上 。 


transition 标签 能 接受 的 参数 与 Yue.js 1.0 中 注册 








的 transition 接 受 的 选项 类 似 。 
1. name 


同 v-transition 中 接受 的 参数 ， 目 动 生成 对 应 的 


name-enter, name-enter-active 类 名 。 


2. appear 


JTA BRN Re A transition, A 
值 为 false。 即 v-ift 比 定 值 初始 为 true 时 ， 首 次 演 染 时 
是 否 调用 transition 效 果 。 在 Vue.js 1.0 中 ，v-if 如 果 
初始 值 为 true 的 话 ， 首 次 演 染 是 无 法 使 用 transition 
效果 的 ， 只 有 v-show 能 使 用 。 











3. CSS 


同 Vue.js 1.0 的 CSS 选 项 ， 如 果 设 置 为 tue， 则 
只 监听 钧 子 函 数 的 调用 。 


4. type 


同 Vue.js 1.0 的 type 选 项 ， 设 置 监 听 CSS 动 画 结 
束 事 件 的 类 型 。 


5. mode 








控制 过 渡 插 入 / 移 除 的 先后 顺序 ， 主 要 用 于 元 
素 切 换 时 。 可 供 选 择 的 值 有 “out-in”, “in-out”, WR 
不 设置 ， 则 同时 调用 。 例 如 : 








<transition name="fade" mode="out-in "> 
<p :key="ok">{{ok}}</p> // 这 里 的 :key='ok' 主 要 用 于 强制 
替换 元 素 ， 展 现 出 ijn-out/out-in 效 果 


</transition> 





“ok7EtruefllfalseW] eI, mode=“out-in’ RE 
移 移 除 <p>false</p>， 等 过 滤 绪 束 后 ， 再 插入 
<p>true</p> 元 素 ，mode=“in-out” 则 相反 。 


6. 钩子 函数 


enterClass, leaveClass, enterActiveClass, 
leaveActiveClass, appearClass, appearActiveClass, 可 


以 分 列 目 定义 各 阶段 的 class 类 名 。 


总 得 来 说 ， 在 Vue.js 2.0 中 我 们 可 以 直接 使 用 
transition 标 签 并 设 定 其 属性 来 定义 一 个 过 渡 效 果 ， 
而 不 需要 像 在 Vue.js 1.0 中 通过 Vue.transition() 语 句 
来 定义 。 例 如 : 


<transition 





name="fade" 

mode="out-in" 

appear 
@before-enter="beforeEnter" 
@enter="enter" 
@after-enter="afterEnter" 
@appear="appear" 


@before-leave="beforeLeave" 
@leave="leave" 
@after-leave="afterLeave" 
@leave-cancelled="leaveCancelled" 
> 
<div class="content" v-if="ok">{{ ok }}</div> 
</transition> 





5.3.2 ”类 名 变化 


从 上 述 属 性 的 变化 中 我 们 可 以 看 出 ，Vue.js 2.0 

中 新 增 了 两 个 类 名 enter-active 和 ]leave-active， 用 于 

分 离 元 素 本 和 号 样式 和 过 渡 样 式 。 我 们 可 以 把 过 渡 样 

St lente: active. *-leave-active'#, *-enter, *- 

leave F NJE X TRATÈ ESR, MOR JASE 

式 则 由 目 己 的 类 名 去 控制 ， 不 和 过 渡 系 统 目 动 添加 
的 类 名 样式 混合 起 来 。 举 个 例子 : 


content { 
width: 100px; height: 100px; 











background: black; opacity: 1; 

} 

.fade-enter, .fade-leave-active{ 
Opacity: Q; 

} 

.fade-enter-active, .fade-leave-active{ 
transition: all 3s ease; 

} 

<transition name="fade"> 
<div class="content" v-if="o0k"></div> 

</transition> 





这 样 ，<transition fade="name"></transition> it 


可 以 当做 一 个 可 复 用 的 过 渡 元 素 ， 作 用 到 你 期 望 的 


TURE. 


enter-active/4s JNE] 7c A EMI PLE TE ICRA 
DOM 树 后 ， 在 transition/animation 结 束 后 从 元 素 上 
移 除 。leave-active 则 在 DOM 元 素 开 始 移 除 时 添加 
上 ， 在 transition/animation 结 束 后 移 除 。 


5.3.3 ”钩子 函数 变化 


Vue.js 2.0 中 添加 了 三 个 新 的 钩子 图 数 ，before- 
appear, appear 和 after-appear。appear 主 要 是 用 于 元 
系 的 首次 泻 染 ， 如 采 同 时 声明 了 enter 和 appear 的 相 
KREATA TA AKAR E H appear% 

















钩子 函数 ， 再 次 泻 染 的 时 候 才 使 用 enter 系 钧 子 函 
数 。 例 如 : 





<transition 
name="fade" mode="in-out" appear 
@before-enter="beforeEnter" 
@enter="enter" 
@after-enter="afterEnter" 


@appear="appear" 


@before-leave="beforeLeave" 

@leave="leave" 

@after-leave="afterLeave" 
> 

<div class="content" v-if="ok">{{ ok }}</div> 
</transition> 
var vm = new Vue({ 


methods : { 

beforeEnter : function(el) { 
console.log('beforeEnter', el.className) ; 

p 

enter : function(el) { 
console.log('enter', el.className); 

Ja 

afterEnter : function(el) { 
console.log('afterEnter', el.className); 

Ja 

appear : function(el) { 
console.log('appear', el.className) ; 


le 
beforeLeave : function(el) { 

console.log('beforeLeave', el.className) ; 

le 

leave : function(el) { 

console.log('leave', el.className) ; 

ie 

afterLeave : function(el) { 
console.log('afterLeave', el.className) ; 


Jo 
}); 





beforeEnter content 


appear content fade-enter fade-enter-active 


afterEnter content 


另外 ， 取 消 了 v-if 时 的 leave-cancelled， 元 系 一 
日 被 移 除 则 不 能 停止 该 操作 。 但 使 用 v-show 时 ， 
leave-cancelled 和 钩子 仍然 有 效 。 我 们 可 以 沿用 上 面 这 
个 例子 ， 在 transition 上 加 一 个 钩子 函数 @leave- 
cancelled="leaveCancelled"， 将 元 素 设 置 成 <div 





class="content" v-if="0k">{{ ok }}</div>, <div 
class="content" v-show="o0k">{{ ok }}</div> 两 种 情 
况 ， 然 后 手动 设置 vm.ok = false, 并 在 元 素 仍 在 过 渡 
中 设置 vm.ok = true。 在 v-if 情 况 下 ， 元 素 继 续 进 行 
leave transition， 在 transition 结 束 后 再 次 进行 enter 过 
VE; 而 在 v-show 情 况 下 ， 元 素 则 直接 停止 了 leave 
transition, Fi AY J leaveCancelled#J pki, SAJR 
直接 进行 了 enter 过 渡 。 


5.3.4 transition-group 


除了 内 置 的 transition 标 签 外 ，Vue.js 2.0 提 供 了 
transition-group 标 签 ， 方 便 作用 到 多 个 DOM 元 系 
上 。 例 如 : 


<transition-group tag="ul" name="list"> 
<li v-for="item in items" :key="item.id"> 
{{ item.text }} 
</li> 


</transition-group> 








transition-group 的 主要 作用 是 给 其 子 元 素 设 定 
一 个 统一 的 过 渡 样 式 ， 而 不 需要 给 每 单个 元 又 都 用 
transition 包 于 起 来 。 





和 transition 标 签 不 一 样 ，transition-group 不 是 一 
个 虚拟 DOM， 会 真实 泻 染 在 DOM 树 中 。 默 认 会 是 
span 标 签 ， 但 我 们 也 可 以 通过 属性 tag 来 设 定 ， 如 上 
例 中 transition-group 最 终 输 出 的 会 古 一 个 标签 。 男 
外 ， 我 们 也 可 以 通过 <ul is="transition-group"> 这 样 
的 写法 来 设 定 标签 。 

transition-group 接 收 的 参数 和 transition 基 本 一 
致 ， 但 不 文 持 mode 参 数 ， 而 且 每 个 transition-group 
的 子 元 素 都 需要 包含 唯一 的 key， 如 上 例 中 的 


key=item.id. 


我 们 可 以 补 全 上 面 的 代码 ， 作 为 一 个 完整 的 


transition-group 例 子 : 














<style> 
.list-li { 
width: 100px; height: 20px; 
transform: translate(@, ©); 


} 


.list-enter, .list-leave-active{ 
Opacity: ©; transform: translate(-3@px, @); 
J 
.list-enter-active, .list-leave-active{ 
transition: all 6.5s ease; 
} 
</style> 
<transition-group tag="ul" name="list" appear> 
<li v-for="item in items" :key="item.id" class="lis 
t-li"> 


{{ item.text }} 
</li> 
</transition-group> 
var vm = new Vue({ 


el : ‘#app', 
data : { 
items : [ 
{ id : 1, text : '11' }, 
{ id : 2, text : '22' }, 
{ id : 3, text : '33' }, 
{ id : 4, text : '44' } 
] 
} 
}) 





我 们 可 以 在 控制 台 里 对 vm.items 进 行 push 或 





splice 操 作 ， 这 样 就 能 看 到 li 标签 的 过 渡 效 果 了 了 。 


第 6 章 组 件 


代码 复 用 一 直 是 软件 开发 中 长 期 存在 的 一 个 问 
题 ， 每 个 开发 者 都 想 再 次 使 用 之 前 写 好 的 代码 ， 驻 
担心 引入 这 上 段 代码 后 对 现 有 的 程序 产生 影响 。 从 
jQuery 开始 ， 我 们 就 开始 通过 插件 的 形式 复 用 代 
人 码 ， 到 Requirejs 开 始 将 js 文件 模块 化 ， 按 需 加 载 。 
这 两 种 方式 都 提供 了 比较 方便 的 复 用 方式 ， 但 往往 
还 需要 自己 手动 加 入 所 需 的 CSS 文 件 和 HTML 模 
块 。 现 在 ，Web Components 的 出 现 提 供 了 一 种 新 的 
思路 ， 可 以 自 定 义 tag 标 签 ， 并 拥有 上 自身 的 模板 、 样 
式 和 交互 。Angularjs 的 指令 ，Reactjs 的 组 件 化 都 在 
往 这 方面 做 答 试 。 同 样 ，Vue.js 也 提供 了 目 己 的 组 
件 系 统 ， 文 持 自 定义 tag 和 原生 HTML 元 素 的 扩展 。 














6.1 组 件 注 册 


Vue.js 创 建 组 件 构造 右 的 方式 非常 简单 ， 在 本 
书 第 2.5 章 的 时 候 也 提 到 过 : 





var MyComponent = Vue.extend({ ... }); 


XIE, RARR SP as, (ALE 
还 无 法 直接 使 用 这 个 组 件 ， 需 要 将 组 件 注册 到 应 用 
中 。Vue.js 提 供 了 两 种 注册 方式 ,分别 是 全 局 注册 
和 局 部 注册 。 


6.1.1 全 局 注册 
全 局 注册 需要 确保 在 根 实例 初 始 化 之 前 注册 ， 


这 样 才能 使 组 件 在 任意 实例 中 被 使 用 ， 注 册 方 式 如 
a 


Vue.component('my-component', MyComponent) ; 








这 条 语句 需要 写 在 var vm = new Vue({...}):Z 
前 ， 注 册 成 功 之 后 ， 束 可 以 在 模块 中 以 自 定 义 元 系 
<my-component> 的 形式 使 用 组 件 。 对 于 组 件 的 命 
名 ，W3C 规 范 是 字母 小 写 且 包含 一 个 短 横 杠 “-”， 
~ 暂 不 强制 要 求 ， 但 官方 建议 遵循 这 个 规则 比 
NUF e 


整个 使 用 方法 代码 如 下 : 








<div id="app"> 
<my - component></my-component> 
</div> 


var MyComponent = Vue.extend({ 
template : '<p>This is a component</p>' 


}) 


Vue .component('my-component', MyComponent) 


var vm = new Vue({ 
el : '#app' 
}); 





输出 结果 如 下 : 


<div id="app"> 
<p>This is a component</p> 
</div> 


ee 


6.1.2 局 部 注册 


局 部 注册 则 限定 了 组 件 只 能 在 被 注册 的 组 件 中 
使 用 ， 而 无 法 在 其 他 组 件 中 使 用 ， 注 册 方 式 如 下 : 





var Child = Vue.extend({ 
template : '<p>This is a child component</p>' 


}); 


var Parent = Vue.extend({ 
template: '<div> \ 
<p>This is a parent component</p> \ 
<my-child></my-child> \ 
</div>', 
components: { 
'my-child': Child 
} 
}); 





得 出 结 末 即 为 : 





<div> 
<p>This is a parent component</p> 
<p>This is a child component</p> 


</div> 





而 如 果 在 根 实例 中 调用 <my-child></my- 
child>， 则 会 抛 出 异常 [Vue warn]: Unknown custom 
element: <my-child> - did you register the component 
correctly? For recursive components, make sure to 
provide the "name" option. 


6.1.3 ”注册 语法 糖 


Vue.js 对 于 上 述 两 种 注册 方式 也 提供 了 简化 的 
方法 ， 我 们 可 以 直接 在 注册 的 时 候 定 义 组 件 构造 器 
选项 ， 例 如 : 





// 全 局 注册 
Vue.component('my-component', { 

template : '<p>This is a component</p>' 
}) 


// 局 部 注册 
var Parent = Vue.extend({ 
template: ‘<div> \ 
<p>This is a parent component</p> \ 
<my-child></my-child> \ 
</div>’, 
components: { 
"my-child': { 
template : ‘<p>This is a child component</p>' 


}); 


6.2 ”组件 选项 


组 件 接 受 的 选项 大 部 分 与 Yue 实例 一 样 ， 相 同 
的 部 分 本 章 束 不 歼 述 了， 主要 说 明 一 下 两 者 的 区 列 
和 组 件 选项 中 的 props， 用 于 接受 父 组 件 传递 的 参 
数 。 


6.2.1 组 件 选 项 中 与 Yue 选 项 的 区 别 


组 件 选 项 中 的 el 和 data 与 Yue 构 造 占 选项 中 这 两 
个 属性 的 赋值 会 各 微 有 些 不 同 。 在 Vue 构 造 右 中 是 
直接 赋值 : 


var vm = new Vue({ 
el : ‘#app', 
data : { 
name : 'Vue' 


}) 





而 在 组 件 中 需要 这 么 定义 : 


var MyComponent = Vue.extend({ 
data : function() { 


return { 
name : ‘component' 





这 是 因为 MyComponent 可 能 会 拥有 多 个 实例 ， 
例如 在 茶 个 组 件 模板 中 多 次 使 用 <my-component> 
</my-component>。 如 果 将 对 象 data 直 接 传递 给 了 
Vue.extend({})， 那 所 有 MyComponent 的 实例 会 共享 
一 个 data 对 象 ， 所 以 需要 通过 函数 来 返回 一 个 新 对 
象 。 同 样 ，el 也 是 这 么 处 理 ， 只 不 过 在 组 件 中 通过 





el 来 耳 接 设 定 挂 载 元 素 的 情况 比较 少见 ， 目 然 如 人 免 
了 这 种 情况 。 


6.2.2 ”组 件 Props 


选项 props 征 组 件 中 非常 重要 的 一 个 选项 ， 起 到 
了 父子 组 件 间 桥 桨 的 作用 。 


首先 ， 需 要 明确 的 是 ， 组 件 实例 的 作用 域 是 孤 
了 的 ， 也 就 是 说 子 组 件 的 模板 和 模块 中 是 无 法 直接 
调用 父 组 件 的 数据 ， 所 以 通过 props 将 父 组 件 的 数据 
传递 给 子 组 件 ， 子 组 件 在 接受 数据 时 需要 显 式 声明 
props， 例 如 : 














Vue.component('my-child', { 
props : ['parent'], 
template: '<p>{{ parent }} is from parent' 


<my-child parent="This data"></my-child> //-> <p>This 
data is from parent </p> 





wl zEpropsl FEA EHT A, DIEA J LA Al 
市 会 进行 详细 说 明 。 


1. 驼峰 命名 


同 指令 等 情况 相同 ， 由 于 HIML 属 性 不 区 分 大 
小 写 ， 如 果 我 们 在 <my-child> 中 的 属性 使 用 驼峰 式 
myParam 命 名 ， 即 <my-child myParam="...'>, KÆ 
props 中 的 命名 即 为 props: [myparam']。 上 所 以 如 果 需 
要 使 用 驼峰 式 命 名 的 话 ， 我 们 需要 在 标签 中 使 用 
my-param， 用 “的 方式 隔 开 ， 这 样 在 props 中 天 可 
以 使 用 props: [myParam'] 的 形式 进行 声明 。 





2. 动态 Props 


除了 上 述 例子 中 传递 静态 数据 的 方式 外 ， 我 们 
也 可 以 通过 v-bind 的 方式 将 父 组 件 的 data 数 据 传递 给 
子 组 件 ， 例 如 : 


<div id="app"> 
<input type="text" v-model="message" /> 
<my-component v-bind:message="message"></my-component 
> 
</div> 
var MyComponent = Vue.extend({ 
props : [ ‘message’ ], 
template : "<p>{{ ‘From parent : ' + message }}</p>" 


}) 
Vue .component('my-component', MyComponent) ; 
var vm = new Vue({ 

el : '#app', 


data : { 
message : 'default' 


} 
})s 





这 样 我 们 在 更 改 根 实例 message 的 值 的 时 候 ， 
组 件 中 的 值 也 随 之 改动 。 除 了 v-bind 外 ， 也 可 以 直 
接 人 简写 成 <my-component :message="message"> 
</my-component> - 


需要 注意 的 是 如 果 和 直接 传递 一 个 数值 给 子 组 
件 ， 就 必须 借助 动态 Props。 如 果 通 过 <my- 
component :message="1"></my-component> 这 种 方式 


传递 的 话 ， 则 在 子 组 件 中 获取 的 message 其 实 是 字 





E 


<my-num :num="num"></my-num> 
Vue.component('my-num', { 
props : ['num'], 
template : "<p>{{ num + ' is a ' + typeof num }}</p>" 


})3 
var vm = new Vue({ 

el : ‘#app', 

data : { 

num : 1 

} 
})3 
// 输出 <p>1 is a number</p> 





3. HEKA 


在 动态 绑 定 中 ，v-bind 指 令 也 提供 了 几 种 修饰 
符 来 进行 不 同方 式 的 绑 定 。Props 绑 定 默 认 是 单 癌 绑 
定 ， 即 当 父 组 件 的 数据 发 生变 化 时 ， 子 组 件 的 数据 
随 之 变化 ， 但 在 子 组 件 中 修改 数据 并 不 影响 父 组 
件 。 修 饰 从 .sync 和 .once 显 示 的 声明 绑 定 为 双 同 或 早 
WIE, WUN: 


<div id="app"> 
<div> 





Parent component: <input type="text" v-model="msg" 
/> 
</div> 
<my-bind :msg="msg"></my-bind> 
</div> 


Vue.component('my-bind', { 
props : ['msg'], 
template : ‘<div> \ 
Child component : \ 
<input type="text" v-model="msg"/> \ 


</div>' 
})5 
var vm = new Vue({ 
el : ‘#app', 
data : { 
msg : '' 
} 
}); 





代 人 码 结果 如 下 : 


Parent component: 123 
Child component : 1232323 





此 时 父子 组 件 中 的 即 是 单 向 绑 定 ， 可 以 通过 
input 修 改 子 组 件 中 的 值 并 不 影响 父 组 件 中 的 值 。 


而 如 果 将 上 述 例子 中 <my-bind :msg="msg"> 
</my-bind> 答 换 成 <my-bind :msg.Sync="msg"></my- 
bind>， 则 在 子 组 件 的 pput 中 修改 值 即 会 影响 父 组 
件 的 值 。 


Parent component: 1232323 
Child component : 1232329] 


once 修 饰 符 意味 着 单 次 绑 定 ， 子 组 件 接受 一 次 
父 组 件 传递 的 数据 后 ， 单 独 维护 这 份 数 据 ， 既 不 影 
啊 父 组 件数 据 也 不 受 其 影响 而 更 新 。 


需要 注意 的 是 ， 由 于 Vue.js 处 理 的 方式 是 引用 
传递 ， 所 以 如 条 prop 传 递 的 是 一 个 对 象 或 数组 ， 那 
在 子 组 件 内 进行 修改 融会 影响 父 组 件 的 状态 ， 即 使 
we HE [A] BB RE tPF o 


4. Props uF 


组 件 可 以 指定 props 验 证 要 求 ， 这 对 开发 第 三 方 
组 件 来 说 ， 可 以 让 使 用 者 更 加 准确 地 使 用 组 件 。 使 
用 验证 的 时 候 ，props 接 受 的 参数 为 json 对 象 ， 而 不 
是 上 述 例子 中 的 数组 ， 例 如 : props : { a: Number 
}， 即 为 验证 参数 a 需 为 Number 类 型 ， 如 有 果 调 用 该 组 
件 传 入 的 a 参 数 为 字符 串 ， 则 会 执 出 卉 单 。Vue.js 提 
供 的 Props 验 证 方式 有 很 多 种 ， 下 面 逐 一 进行 说 明 : 








1) 基础 类 型 检测 : prop: Number， 接 受 的 参数 
HEES, Strings Number, Boolean, 
Function, Object, Array. Ay ž5null, AER 
类 型 均 可 。 


2) 多 种 类 型 : prop:[Number, String], MFZ 
数 为 多 种 类 型 之 一 ， 例 如 类 型 可 以 为 数值 或 字符 
ae 


3) 参数 必需 : prop: { type : Number, required: 
true}， 参 数 必 须 有 值 且 为 Number 关 型 。 


4) 参数 默认 : prop: { type : Number, default : 
10 }， 参 数 具 有 默认 值 10。 需 要 注意 的 是 ， 如 果 默 
认 值 设 置 为 数组 或 对 月 ， 需 要 像 组 件 中 data 属 性 那 
样 ， 退 过 函数 返回 值 的 形式 赋值 ， 如 : 





prop : { 
type : Object, 
default : function() { 
return { a: 'a' } 





5) 绑 定 类 型 : prop: { twoWay : true}， 校 验 绑 





ERW, WR ERR ERM RETE 


6) 目 定 义 验 证 函数 : prop: { validator : 
function(value) { return value > 0; } }， 验 证 值 必须 大 
于 0。 


7) 转换 值 : prop: { coerce : function(val) { 
return parselnt(val) }}， 将 字符 串 转 化 成 数值 。 


在 开 及 环境 中 ， 如 果 验 证 失败 了 ，YVue 将 抛 出 
Rew, HEENA BUI 


在 Vue.js 2.0 中 ， 验 证 属性 [twoWay 和 coerce 均 被 
废弃 。 由 于 组 件 间 只 文 持 单 回 绑 定 ， 所 有 twoWay 
的 校 验 也 残 不 存在 了 。 而 coerce 的 用 法 和 计算 属性 
所 以 也 被 上 废弃， 官方 推荐 使 用 计算 属性 
Ae 








6.3 组 件 间 通信 


组 件 间 通信 是 组 件 开 发 时 非常 重要 的 一 环 ， 我 
们 既 和 希望 组 件 的 独立 性 ， 数 据 能 互 不 干涉 ， 又 不 可 
避免 组 件 则 会 有 联系 和 交互 。Vue.js 在 组 件 则 通信 
这 一 部 分 既 提 供 了 直接 访问 组 件 实 例 的 方法 ， 也 提 
供 了 目 定 义 事件 机 制 ， 通 过 广播 、 派 发 、 监 听 等 形 
式 进 行路 组 件 的 函数 调用 。 


6.3.1 直接 访问 


在 组 件 实 例 中 ，Vue.js 提 供 了 以 下 三 个 属性 对 
其 父子 组 件 及 根 实例 进行 卫 接 访问 。 


1) $parent: 父 组 件 实例 。 

2) $children: 包含 所 有 子 组 件 实例 。 

3) $root: 组 件 所 在 的 根 实 例 。 

这 三 个 属性 都 挂 载 在 组 件 的 this 上 ， 虽 然 Vue.js 
提供 了 直接 访问 这 种 方式 ， 但 我 们 并 不 提倡 这 么 操 
作 。 这 会 导致 父 组 件 和 子 组 件 紧密 耘 合 ， 且 目 身 状 


态 难 以 理解 ， 所 以 建议 尽量 使 用 props 在 组 件 间 传递 
数据 。 











6.3.2” 自 定义 事件 监听 


在 Vue 实 例 中 ， 系 统 提供 了 一 和 套 自 定义 事件 接 
口 ， 用 于 组 件 间 通信 ， 方 便 修改 组 件 状 态 。 类 似 于 
在 jQuery， 我 们 给 DOM 元 系 绑 定 一 个 非 原生 的 事 
fF, Bilt: $(‘#ele').on(‘custom’, fn)， 然 后 通过 手动 
调用 $('#ele').trigger('custom") 方 式 来 进行 事件 的 触 
Ko 





那 在 Vue.js 中 ， 我 们 先 来 看 下 如 何在 实例 中 监 
听 目 定义 事件 。 


1. events Jil 


我 们 可 以 在 初始 化 实例 或 注册 子 组 件 的 时 候 ， 
直接 传 给 选项 events 一 个 对 象 ， 例 如 : 





var vm = new Vue({ 


el : '#app', 
data : { 

todo : [] 
J 


events : { 
'add' : function(msg) { 
this.todo.push(msg); 


| 
2.$on 方 法 


我 们 也 可 以 在 人 条 些 特定 情况 或 方法 内 采用 $on 
方法 来 监听 事件 ， 例 如 ; 





var vm = new Vue({ 
el : ‘#app', 
data : { 
todo : [] 
}s 
methods : { 
begin : function() { 
this.$on('add', function(msg) { 
this.todo.push(msg) ; 
})5 
} 


} 
}); 





6.3.3” 目 定 义 事件 触发 机 制 


设置 完成 事件 监听 后 ， 下 面 来 看 下 Vue.js 的 触 
发 机 制 。 


1. $emit 


在 实例 本 号 上 触 友 事件 。 例 如 : 


events : { 
‘add' : function(msg) { 
this.todo.push(msg) ; 
} 


methods: { 
onClick : function() { 


this.$emit('add', ‘there is a message');// 即 可 触发 e 
vents ¥ Hadd rk žr 
} 
} 





2. $dispatch 

派发 事件 ， 事 件 沿 着 父 链 冒 泡 ， 并 日 在 第 一 次 
触及 回调 之 后 自动 停止 冒 泡 ， 除 非 触发 函数 明确 返 
可 true， 才 会 继续 同上 冒 泡 。 


父 组 件 : 








events : { 
‘add' : function(msg) { 
this.todo.push(msg) ; 
// return true 明确 返回 true 后 ， 事 件 会 继续 同上 冒 泡 
} 
} 


methods: { 
toParent : function() { 
this.$dispatch('add', ‘message from child’); 





调用 子 组 件 中 的 toParent0 函 数 ， 即 可 向 上 冒 
泡 ， 触 友 父 组 件 中 定义 好 的 add 事 件 。 


3. $broadcast 


j T ERF FRH PRERA RER. Bl 
Hs 


父 组 件 : 





methods: { 
toChild : function() { 
this.$dispatch('msg', 'message from parent'); 
} 
} 


子 组 件 : 


events : { 
'msg' : function(msg) { 
alert(msg); 


} 
} 





下 面 ， 我 们 可 以 通过 这 个 完整 的 例子 来 验证 这 
三 种 触 肥 机 制 : 





// 模板 

<div id="app"> 
<input type="text" v-model="content"> 
<button @click="addTodo"> 添 加 </button> 
<button @click="broadcast" > 广播 </buttony> 
<child-todo name="one"></child-todo> 
<child-todo name="two"></child-todo> 


<ul> 
<li v-for="value in todo"> 
{{ value }} 
</li> 
</ul> 
</div> 


// 子 组 件 


Vue.component('child-todo', { 
props : ['name'], 
data : function() { 
return { 
content : 


} 
J 
template : '<div>\ 
Child {{name}} \ 
<input type="text" v-model="content"/> \ 
<button @click="add">¥s}i</button> \ 
</div>’, 
methods : { 
add : function() { 
// FE EIR, KE S SHF todos te, 
叉 不 直接 访问 父 组 件 
this.$dispatch('add', ‘Child ' + this.name + ' 
' + this.content) ; 
this.content = ; 





} 
J 
events : { 
// 用 于 接收 父 组 件 的 广播 
‘to-child' : function(msg) { 
this.$dispatch('add', ‘Child ' + this.name + ' 
+ msg) ; 


} 
} 
}); 
// 根 实例 


var vm = new Vue({ 
el : ‘#app', 
data : { 
todo : [], 
content : 


Jo 
methods : { 
addTodo : function() { 
// 触发 自己 实例 中 的 事件 
this.$emit('add', 'Parent: ' + this.content); 
this.content = ''; 
Jo 
broadcast : function() { 
// 将 事件 广播 ， 使 两 个 子 组 件 实例 都 触发 to-child 事 件 
this.$broadcast('to-child', this.content); 
this.content = ''; 


events : { 
‘add' : function(msg) { 
this.todo.push(msg) ; 








TE BAAS RAN AN: 


Child one “Tr 
Child two WA 


在 根 实例 的 ipput 中 输入 内 容 *Hello”， 点 击 “ 添 
加 ”， 即 会 在 绑 定 v-for 指 令 的 li 标签 中 输出 “Parent: 
Hello”; 或 点 击 “ 广 播 ?， 则 会 输出 “Child one: 





hello” “Child two: hello” 两 条 数据 ， 本 质 就 是 广播 
了 事件 to-child， 两 个 子 组 件 接受 后 触发 了 监听 也 
数 ， 将 内 容 和 组 件 name 参 数 添加 到 父 组件 的 todo 数 
ZAG 


6.3.4 子 组 件 索 引 


虽然 我 们 不 建议 组 件 间 直接 访问 各 自 的 实例 ， 
但 有 时 也 不 可 避免 ，Vue.js 也 提供 了 直接 访问 子 组 
件 的 方式 。 除 了 之 前 的 this.children 外 ， 还 可 以 给 子 
组 件 绑 定 一 个 v-ref 指 令 ， 指 定 一 个 索引 ID， 例 如 : 


<child-todo v-ref:first></child-todo> 


这 样 ， 在 父 组 件 中 束 可 以 通过 this.$refs.first 的 
方式 获取 子 组 件 实例 。 


另外 ， 如 果 v-ref 作 用 在 v-for 绑 定 的 元 素 上 ， 例 
如 : <li v-for="item" v-ref:items> </li>， 父 组 件 获 取 
的 this.$refs.items 为 一 个 数组 ， 包 含 相 应 的 子 组 件 实 
例 。 





64 内容 分 发 


在 实际 的 一 些 情况 中 ， 子 组 件 往 往 并 不 知道 需 
要 展示 的 内 容 ， 而 只 提供 基础 的 交互 功能 ， 内 容 及 
事件 由 父 组 件 来 提供 。 例 如 我 们 经 常会 使 用 的 
Bootstrap 的 模 态 框 (Modal) 插件 ， 如 图 6-1 所 示 。 





Modal title 


One fine body... 


图 6-1 


我 们 在 调用 时 只 希望 使 用 Modal 的 浮 层 属性 ， 
以 及 显示 /关闭 浮 层 等 控制 函数 ， 但 内 容 本 里 则 由 父 
组 件 来 决定 。 对 此 Vue.js 提 供 了 一 种 混合 父 组 件 内 
容 与 子 组 件 目 己 模 板 的 方式 ， 这 种 方式 称 之 为 内 容 
分 发 。Vue.js 参 照 了 当前 web componenti yù fa, 
使 用 <slot> 元 素 为 原始 内 容 的 插 槽 。 首 先 解释 下 内 
容 分 发 的 一 些 基础 用 法 和 概念 ， 最 后 来 说 明 下 
Modal 这 个 实际 案例 。 








6.4.1 ”基础 用 法 
先 举 一 个 简单 的 例子 来 说 明 内 容 分 发 的 基础 用 





<div id="app"> 
// 使 用 包含 slot 标 签 属 性 的 子 组 件 
<my-slot> 
// 属性 slot 值 需要 与 子 组 件 中 slot 的 name 值 匹配 
<p slot="title">{{ title }}</p> 
<div slot="content">{{ content }}</div> 


</my-slot> 
</div> 
// 注册 my-slot 组 件 ， 包 含 <slot> 标签 ， 且 设 定 唯 一 标识 name 
Vue.component('my-slot', { 
template : '<div>\ 
<div class="title"> \ 
<slot name="title"></slot> \ 
</div> \ 
<div class="content"> \ 
<slot name="content"></slot> \ 
</div> \ 
</div>’, 
})5 
var vm = new Vue({ 
el : ‘#app', 
data : { 
title : 'This is a title', 
content : 'This is the content' 


} 
P); 
// 最 后 输出 结果 
<div> 








<div class="title"> 
<p slot="title">This is a title</p> 
</div> 
<div class="content"> 
<div slot="content">This is the content</div> 
</div> 
</div> 





MERFI Da, AHR A N RARE 
丁子 组 件 中 的 slot 标 答 ， 使 得 我 们 可 以 在 不 同 地 方 
使 用 子 组 件 的 结构 而 且 填 充 不 同 的 父 组 件 内 容 ， 从 
而 提升 组 件 的 复 用 性 。 


6.4.2 ”编译 作用 域 


在 上 述 例子 中 ， 我 们 在 父 组 件 中 调用 <my-slot> 
组 件 ， 并 在 <p slot=“title”>{{ title }}</p> 中 绑 定 数据 
title， 从 结果 得 知 此 时 绑 定 的 是 父 组 件 的 数据 。 也 
就 是 说 在 这 种 <my-slot>{{ data }}</my-slot> 模 板 情 
况 下 ， 父 组 件 模板 的 内 容 在 父 组 件 作 用 域内 编译 ; 
子 组 件 模 板 的 内 容 在 子 组 件 作 用 域内 编译 。 


以 下 这 样 的 父 组 件 模 板 例 子 束 是 无 效 的 : 


<my-scope-slot> 
<p slot="title">{{ childData }}</p> 








</my-scope-slot> 
Vue.component('my-scope-slot', { 
template : '<div>\ 
<p>{{ “child: " + childData }}</p> \ 
<slot name="title"></slot> \ 
</div>’, 
data() { 
return { 
childData : ‘child scope’ 


} 
}); 





输出 结 


<div> 
<p>child: child scope</p> 
<p slot="title"></p> 
</div> 





6.4.3 ”默认 slot 


<slot> 标 签 人 多 许 有 一 个 匿名 slot， 不 需要 有 name 
值 ， 作 为 找 不 到 匹配 的 内 容 片 段 的 回 退 插 柳 ， 如 果 
没有 默认 的 slot， 这 些 找 不 到 匹配 的 内 容 片 段 将 被 


忽略 。 下 面 修改 一 下 上 面 的 例子 : 


<anonymous-slot> 
// 去 除 slot 属 性 
<div id="content">{{ content }}</div> 
<p slot="title">{{ title }}</p> 
</anonymous-slot> 
// 匿名 slot 
Vue.component('anonymous-slot', { 
template : '<div>\ 
<div class="title"> \ 
<slot name="title"></slot> \ 
</div> \ 
<div class="content"> \ 
<slot></slot> \ 
</div> \ 
</div>’, 


}); 








此 时 id 为 content 的 元 素 即 为 找 不 到 匹配 的 内 容 
片段 ， 由 于 我 们 在 anonymous-slot 组 件 中 设置 了 匿 
名 slot， 所 以 Vue.js 会 把 该 元 素 插入 到 Slot 中， 最 后 
输出 结果 : 





<div> 


<div class="title"> 

<p slot="title">This is a title</p> 
</div> 
<div class="content"> 


<div>This is the content</div> 
</div> 
</div> 








如 果 将 子 组 件 中 的 匿名 <slot></slot> 蔡 换 成 
<slot name="content"></slot>, Mj#contentjt Aw A. 


接 被 忽略 了， 输出 结 来 为 : 


<div> 
<div class="title"> 
<p slot="title">This is a title</p> 
</div> 
<div class="content"> 
</div> 


</div> 





6.4.4 slot 属性 相同 


在 父 组 件 中 ， 我 们 也 可 以 定义 多 个 相同 slot 属 
性 的 DOM 标 签 ， 这 样 会 依次 插入 到 对 应 的 子 组 件 
的 slot 标 签 中 ， 以 兄 腊 节 氮 的 方式 呈现 ， 我 们 可 以 
将 上 例 中 父 组 件 的 实例 模板 改 成 : 


<my-slot> 





<p slot="title">{{ title + '1'}}</p> 
<p slot="title">{{ title + '2'}}</p> 
<div slot="content">{{ content }}</div> 
</my-slot> 
// 输出 结果 
<div> 
<div class="title"> 
<p slot="title">This is a title1</p> 
<p slot="title">This is a title2</p> 
</div> 
<div class="content"> 
<div slot="content">This is the content</div> 
</div> 
</div> 





6.4.5 “Modal 实 例 


本 小 节 我 们 会 通过 Modal 案 例 来 演示 内 容 分 发 
的 实际 使 用 场景 。 


首先 注册 Modal 子 组 件 : 








// Modal 组 件 模 板 
<script id="modalTpl" type="x-template"> 
<div role="dialog"> 
<div role="document" v-bind:style="{width: optional 
Width}"> 
<div class="modal-content"> 
<slot name="modal-header" > 


<div class="modal-header"> 
<button type="button" class="close" @click=" 
close"> <span>&times ;</span></button> 
<h4 class="modal-title" > 
<slot name="title"> 
{{title}} 
</slot> 
</h4> 
</div> 
</slot> 
<slot name="modal-body"> 
<div class="modal-body"></div> 
</slot> 
<slot name="modal-footer"> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default 
"”@click="close"> 取 消 </button> 
<button type="button" class="btn btn-primary 
"”@click="callback"> 确 定 </button> 
</div> 
</slot> 
</div> 
</div> 
</div> 
</script> 
// 注册 Modal 组 件 
Vue.component('modal', { 
template : '#modalTpl'， // 获取 模板 中 的 HTML 结 构 
props : { 
title: { // Modal 标题 
type: String, 
default: '' 
J 
show: { // 控制 Modal 是 否 显示 
required: true, 
type: Boolean, 


twoWay: true 
Jo 
width: { // Modal 宽度 
default: null 
hs 
callback: { // 点 击 确 定 按钮 的 回调 函数 
type: Function， 
default : function() {} 


} 
Jo 
computed: { // 计算 属性 
optionalwidth () { // 处 理 props 的 width 属性 
if (this.width === null) { 
return null; 
} else if (Number.isInteger(this.width)) { 
return this.width + 'px'; 
} 
return this.width; 
} 
Jo 
watch: { 
show (val) { // show 值 变化 时 调用 该 函数 
var el = this.$el; 
if (val) { 
el.style.display = 'block'; //show 值 为 true 时 ， 
显示 根 元 素 
} else { 
el.style.display = 'none'; //show 值 为 false 时 ， 
隐藏 根 元 素 


} 
} 
Jo 
methods: { 
close () { 


this.show = false; 


} 


}) 
// 父 组 件 调用 方式 
// 需要 引入 http://cdn.bootcss.com/bootstrap/3.3.6/css/b 
ootstrap.css 样 式 
// 父 组 件 中 使 用 modal 组 件 
<div id="app"> 
<button @click="sShow = true">open</button> 
<modal :show.sync="Show" width="30@px" :callback="c 
lose"> 
<!- 蔡 换 modal 组 件 中 的 <slot name="modal-header"></slo 
t> 插 槽 --> 
<div slot="modal-header" class="modal-header">Titl 
e</div> 
<!- 蔡 换 modal 组 件 中 的 <slot name="modal-body"></slot> 
fait --> 
<div slot="modal-body" class="modal-body"> 
<div class="inner"> 
Content 
</div> 
</div> 
<! 一 由 于 父 组 件 中 没有 设 定 slot="modal-footer" 的 元 素 ， 所 
以 使 用 子 组 件 中 的 默认 HTML 结 构 --> 


</modal> 

</div> 

var vm = new Vue({ 
el : '#app', 
data : { 

show : false 

Jo 
methods : { 


close : function() { 
alert('save'); 
this.show = false; 
} 
} 


}); 


open 


Title 


Content 


最 终 得 到 一 个 被 button 控 制 打 开 的 Modal 模 态 
框 ， 并 且 内 容 由 父 组 件 定义 ， 并 提供 模 态 框 的 宽度 
及 确定 后 的 回调 函数 。 





6.5 ”动态 组 件 


Vue.js 支 持 动 态 组 件 ， 即 多 个 组 件 可 以 使 用 同 
一 挂 载 点 ， 根 据 条 件 来 切换 不 同 的 组 件 。 使 用 保留 
标签 <component>， 通 过 绑 定 到 is 属性 的 值 来 判断 挂 
载 哪个 组 件 。 这 种 场景 往往 运用 在 路 由 控制 或 者 tab 
切换 中 。 本 小 市 先 介 绍 下 动态 组 件 的 基础 用 法 。 


6.5.1 ”基础 用 法 


我 们 通过 一 个 切换 页 面 的 例子 来 说 明 一 下 动态 
组 件 的 基础 用 法 : 











<div id="app"> 


// 相当 于 一 级 导航 栏 ， 点 击 可 切换 页 面 


<ul> 
<li @click="currentView = 'home'">Home</1i> 
<li @click="CcurrentView = '‘list'">List</li> 
<li @click="currentView = ‘detail'">Detail</1li> 
</ul> 
<component :is="currentView"></component> 
</div> 
var vm = new Vue({ 
el : ‘#app', 
data: { 
currentView: ‘home' 
J 


components: { 


home: { 


template : '<div>Home</div>' 
list: { 
template : ‘<div>List</div>' 
detail: { 
template : ‘<div>Detail</div>' 
} 


} 
})s 








component 标 俭 上 is 属性 决定 了 当前 采用 的 子 组 
件 ，:i 是 v-bind:is 的 缩写 ， 绑 定 了 父 组 件 中 data 的 





currentView 属 性 。 顶 部 的 dQ 则 起 到 导航 的 作用 ， 点 
击 即 可 修改 currentView 值 ， 也 就 修改 component 标 
答 中 使 用 的 子 组 件 类 型 ， 需 要 注意 的 事 ， 
currentView 的 值 需要 和 父 组 件 实例 中 的 components 
属性 的 key 相 对 应 。 





6.5.2 keep-alive 


component 标 俭 接受 keep-alive 属 性 ， 可 以 将 切 
换 出 去 的 组 件 保留 在 内 存 中 ， 避 免 重 新 泻 染 。 我 们 
将 上 述 例子 中 的 component 标 签 修改 为 : 





<component :is="currentView" keep-alive></component> 


上 


并 且 将 home 组 件 修改 为 : 


home: { 
template : ‘<div> \ 
<p>Home</p> \ 
<ul> \ 
<li v-for="item in items">{{ item }}</li> \ 
</ul> \ 
</div>’, 
data : function() { 
return { 
items : [] 
} 
J 
ready : function() { 
console.log('fetch data'); 
this.items = [1, 2, 3, 4, 5]; 
} 





在 keep-alive 属 性 下 ， 可 以 在 home 和 list 之 间 切 
换 currentView，home 组 件 的 ready 函 数 只 运行 一 
次 ， 可 以 看 到 控制 台 只 输出 了 一 次 *fetch data”. m 
将 keep-alive 属 性 去 除 后 ， 再 次 在 home 和 list 组 件 间 
切换 ， 会 发 现 每 点 击 到 home， 控 制 台 都 会 输出 一 


次 “fetch data’. 


我 们 可 以 根据 该 特性 适当 地 进行 页 面 的 性 能 优 
化 ， 如 果 每 个 组 件 在 激活 时 并 不 要 求 每 次 都 实时 请 
求 数 据 ， 那 使 用 keep-alive 可 以 避免 一 些 不 必要 的 重 
复 泻 染 ， 导 致 用 户 看 到 停留 时 间 过 长 的 空白 页 面 。 
但 如 有 末 每 次 激活 组 件 都 需要 问 后 高 请求 数据 的 话 ， 
束 个 太 适 合 使 用 keep-alive 属 性 了 。 


Vue.js 2.0 中 keep-alive 属 性 被 修改 为 标签 ， 例 
如 : 





<keep-alive> 
<component v-bind:is="view"></component> 
</keep-alive> 





6.5.3 activate’) pk A 


Vue.jsza Zi tte HE Y activate rA, VERA 
动态 组 件 切换 或 者 静态 组 件 初 始 化 的 过 程 中 。 
activate 接 受 一 个 回调 函数 做 为 参数 ， 使 用 函数 后 组 
件 才 进行 之 后 的 演 染 过 程 。 我 们 将 上 述 例子 中 的 
home 组 件 修改 为 : 





home: { 
template : ‘<div> \ 
<p>Home</p> \ 
<ul> \ 
<li v-for="item in items">{{ item }}</li> \ 
</ul> \ 
</div>’, 
data : function() { 
return { 
items : [] 


} 
J 


activate : function(done) { 
var that = this; 
// 此 处 的 setTimeout 用 于 模拟 正式 业务 中 的 ajax 异步 请 求 数据 
setTimeout(function() { 
that.items = [1, 2, 3, 4, 5]; 
done(); 
}, 1000); 
} 
} 





此 时 也 可 以 定义 两 个 component 作 为 对 比 ， 并 
设 定 其 中 一 个 属性 为 keep-alive: 


<component :is="currentView"></component> 
<component :is="currentView" keep-alive></component> 





可 以 对 比 出 ， 再 次 激活 home 后 ， 未 使 用 keep- 
alive 的 component 会 延迟 1s 的 时 间 才 演 染 出 列表 。 


6.6 Vue.js 2.0 中 的 变化 


本 小 节 主 要 说 明 下 Vue.js 2.0 中 对 于 组 件 用 法 
及 api 的 一 些 相 关 变 化 。 





0.0.1 event 


Vue.js 2.0 中 废弃 了 event 选 项 ， 所 有 的 目 定 义 事 
件 都 需要 通过 $emit, $on, $off 函数 来 进行 触发 、 监 
听 和 取消 监听 。 另 外 ， 废 弃 了 $dispatch 和 $broadcast 
方法 。 官 方 认 为 这 两 种 方法 主要 依赖 于 组 件 的 树 形 
结构 ， 而 当 组 件 结构 越 来 越 复 杂 后 ， 这 种 事件 法 的 
形式 将 难以 被 理解 ， 而 有 旦 也 并 不 能 解决 兄 贡 组 件 之 
则 的 通信 问题 。 所 以 官方 推荐 使 用 集中 式 的 事件 管 
n 的 通信 ， 而 不 是 依赖 于 组 件 本 

的 结构 。 


官方 建议 可 以 直接 使 用 一 个 空 Vue 实 例 来 处 理 
简单 的 事件 触 肥 机 人 制 : 




















var bus = new Vue(); 
bus.$emit('create', { title : '‘name'}); 
bus.$on('create', function(data) { 

// 进行 对 应 的 操作 
}) 


oo 


这 样 使 用 的 话 ， 事 件 的 监听 和 触发 机 制 就 脱离 
了 组 件 的 结构 ， 完 全 依赖 于 bus 这 个 实例 ， 在 整个 
项 目的 任意 地 方 我 们 都 可 以 设置 监听 和 触发 函数 。 
例如 : 








<div id="app"> 
<comp-a></comp-a> 
<comp-b></comp-b> 
</div> 
var bus = new Vue(); 
var vm = new Vue({ 
el : ‘#app', 
components : { 
compA : { 
template : ‘<div> \ 
<input type="text" v-model="name" /> \ 
<button @click="create"> 添 加 </button> \ 
</div>', 
data : function() { 
return { 
name : '' 
} 
Jo 
methods : { 
create : function() { 
bus.$emit('create', { name : this.name }); 
this.name = ''; 


compB : { 
template : ‘<ul> \ 
<li v-for="item in items">{{ item.name }} </li 


</ul>’, 
data : function() { 
return { 
items : [] 
} 
Jo 
// mounted 为 Vue.js 2.6 中 新 的 生命 周期 函数 
mounted() { 
var that = this; 
bus.$on('create', function(data) { 
that.items.push(data) ; 
}) 





. gavin 
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在 comp-a 组 件 中 输入 内 容 ， 点 击 “ 添 加 ” 即 可 触 
发 create 事 件 。 在 兄弟 组 件 comp-b 中 则 监听 这 个 
create 事 件 ， 并 把 传 入 的 值 添 加 到 上 自身 的 items 数 组 
中 。 此 时 的 bus 实 例 即 可 抽象 成 一 个 集中 式 的 事件 
处 理 器 ， 供 所 有 的 组 件 使 用 。 








而 在 相对 复杂 的 场景 中 ， 则 推荐 引入 状态 管理 
机 制 ，Vuex 束 是 这 种 机 制 与 Yue.js 结 合 的 实现 形 
式 。 这 个 会 在 第 九 章 做 一 个 详细 的 说 明 。 


6.6.2 keep-alive 


keep-alive 不 再 是 动态 组 件 component 标 签 中 的 
属性 ， 而 成 为 了 单独 的 标签 。 使 用 方式 如 下 : 








<keep-alive> 
<component :is="currentView"></view> 
</keep-alive> 





keep-alive 也 可 以 不 和 component 配 合 使 用 ， 单 
独 包 囊 多 个 子 组 件 ， 只 需要 确保 所 有 子 组 件 只 激活 
Le a e 例如 : 





<keep-alive> 
<comp-a v-if="active"></comp-a> 
<comp-b v-else></comp-b> 


</keep-alive> 





6.6.3 slot 


slot 不 再 支持 多 个 相同 plot 属 性 的 DOM 插 入 到 
对 应 的 slot 标 签 中 ， 一 个 slot 只 被 使 用 一 次 。 下 面 以 
6.4.4 节 中 的 例子 来 说 明 : 


// 父 组 件 中 定义 了 多 个 slot="" 

<div slot="modal-header" class="modal-header">Titlel</d 
iv> 

<div slot="modal-header" class="modal-header">Title2</d 
iv> 


// 子 组 件 


<slot name="modal-header"></slot> 





在 Vue.js 1.0 中 ， 父 组 件 中 的 两 个 modal-header 
都 会 添加 到 slot 中 ， 而 在 Vue.js 2.0 中 ， 第 二 个 
modal-header 会 被 忽略 。 


男 外 ，slot 标 签 不 再 你 存 目 喘 的 属性 及 样式 ， 
均 由 父 元 又 或 被 插入 的 元 系 提 供 样式 和 属性 。 





6.6.4 refs 


子 组 件 过 引 v-ref 的 声明 方式 产生 了 变化 ， 不 再 
w T E $M — 7S ZB MP IB 
性 ， 例 如 : 





<comp ref="first"></comp> //Vue.js 1.0 中 为 《comp v-ref 


="first"></first> 


调用 方式 并 没有 发 生变 化 ， 仍 采用 vm.$refs 的 
方式 直接 访问 子 组 件 实 例 。 


第 7 章 ”Vue.js 常 用 插件 


Vue.js 本 里 只 提供 了 数据 与 视图 绑 定 及 组 件 化 
等 功能 ， 如 果 想 用 它 来 开发 一 个 完整 的 
SPA (Single Page Application) 应 用 ， 我 们 还 需要 
使 用 到 一 些 Vue.js 的 插件 。 本 章 主 要 介绍 Vue-router 
和 Vue-resouce， 分 别 能 提供 路 由 管理 和 数据 请 求 这 
两 个 功能 。 除 此 之 外 ， 还 有 Vue-devtools， 这 是 一 
蒜 方 便 查 看 Vue.js 实 例 数 据 的 chrome 插 件 ， 这 对 我 
们 开发 和 调试 都 有 非常 大 的 帮助 。 














7.1 Vue-router 


Vue-router 是 给 Vue.js 提 供 路 由 管理 的 插件 ， 逢 
用 hash 的 变化 控制 动态 组 件 的 切换 。 以 往 页 面 间 跳 
转 都 由 后 端 MVC 中 的 Controller 层 控制 ， 通 过 <a> 标 
等 的 href 或 者 直接 修改 ]jocation.href， 我 们 会 癌 服 务 
端 发 起 一 个 请 求 ， 服 务 端 啊 应 后 根据 所 接收 到 的 信 
因 去 获取 数据 和 指派 对 应 的 模板 ， 演 染 成 HTML 再 
返回 给 浏览 费 ， 解 析 成 我 们 可 见 的 页 面 。Vue.js + 
Vue-router 的 组 合 将 这 一 套 逻 辑 放 在 了 前 端 去 执 
行 ， 切 换 到 对 应 的 组 件 后 再 问 后 端 请 求 数据 ， 填 充 
进 模板 来 ， 在 浏览 右 病 完成 HTML 的 演 染 。 这 样 也 
有 助 于 前 后 端 分 离 ， 前 端 不 用 依赖 于 后 端的 馆 辑 ， 
只 需要 后 端 提 供 数据 接口 即 可 。 


本 章 部 分 代码 会 采用 ES6 的 写法 ， 运 行 时 需要 
使 用 Babel 进 行 编译 。 


7.1.1 引用 方式 


Vue-router 可 以 直接 引用 编译 好 的 js 文件 ，CDN 
地 址 为 : 

















https://cdn.jsdelivr.net/vue.router/@.7.10/vue-router.m 
in.js 


在 HTML 中 直接 用 script 标 签 引入 即 可 ， 例 如 : 





<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min 
.js ></script> 
<script src='https://cdn.jsdelivr.net/vue.router/@.7.10 


/vue-router.min.js' ></script> 





也 可 以 采用 npm 的 方式 安装 : 


npm install vue-router 





引用 方式 如 下 : 


import Vue from ‘vue'; 
import VueRouter from ‘vue-router' ; 
Vue.use(VueRouter) ; 





7.1.2 基本 用 法 


vue-router 的 基本 作用 束 是 将 每 个 路 径 映 射 到 对 
应 的 组 件 ， 并 通过 修改 路 由 进行 组 件 则 的 切换 。 管 
规 路 径 规 则 为 在 当前 url 路 径 后 面 加 上 #!/path，path 
BUA BCE WY AU es Fee ae PON: 








<div id="app"> 
<nav class="navbar navbar-inverse"> 
<div class="container"> 
<div class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 
<li> 


<!- 使 用 v-link 指令 ，path 的 值 对 应 跳 转 的 路 径 ， 即 # 


!/home --> 
<a v-link="{ path : '/home'}">Home</a> 
</li> 
<li> 
<a v-link="{ path : '/list'}">List</a> 
</li> 
</ul> 
</div> 
</div> 
</nav> 
<div class="container"> 
<!- 路 由 切换 组 件 template 插 入 的 位 置 --> 
<router-view></router-view> 
</div> 
</div> 
js 代码 : 
// 创建 子 组 件 ， 相 当 于 路 径 对 应 的 页 面 
var Home = Vue.extend({ 
template : '<h1>This is the home page</h1>' 


}); 


// 创建 根 组 件 
var App = Vue.extend({}) 


// 创建 路 由 需 实 例 


var router = new VueRouter() 





// 通过 路 由 器 实例 定义 路 由 规则 《需要 在 启动 应 用 前 定义 好 ) 

// 每 条 路 由 会 映射 到 一 个 组 件 。 这 个 值 可 以 是 由 Vue.extend 创 建 的 
组 件 构造 函数 〈 如 Home ) 

// 也 可 以 直接 使 用 组 件 选 项 对 象 ( 如 '/1ist' 中 component 对 应 的 值 
) 


router.map({ 


‘/home': { 
component: Home 

J 

'/list': { 


component : { 
template: '<h1>This is the List page</h1>' 


// 路 由 大 实例 会 创建 一 个 Vue 实 例 ， 并 且 挂 载 到 第 二 个 参数 元 素 选 择 
ait DL Fic A DOM_E- 
router.start(App, '#app') 





最 终结 果 如 下 : 





This Is the home page 


7.13 KEK HA 


一 般 应 用 中 的 路 由 方式 不 会 像 上 述 例子 那么 简 
单 ， 往 往 会 出 现 二 级 导航 这 种 情况 。 这 时 惑 需 要 使 
用 藤 套 路 由 这 种 写法 。 我 们 给 上 述 例子 添加 一 个 
Biz 组 件 ， 包 含 一 个 航 套 的 router-view， 修 改 如 下 : 








var Biz = Vue.extend({ 
template : ‘<div> \ 
<hi>This is the some business channel</h1> \ 
<div class="container"> \ 
<ul class="nav navbar-nav"> \ 


<li> \ 
<a v-link="{ path : \'/biz/list\' }">List</a> 


</li> \ 
<li> \ 
<a v-link="{ path : \'/biz/detail\'}">Detail 
</a> \ 
</li> \ 
</ul> \ 
</div> \ 
<router-view></router-view> \ 
</div>' 


})s 





路 由 配置 修改 如 下 : 


router.map({ 
‘/home': { 
component: Home 


: 1 
component : Biz, 
subRoutes : { 
'/list' : { 
component : { 
template : '<h2>This is the business list 
page</h2>' 
} 


Jo 
'/detail' : { 
component : { 
template : '<h2>This is the business detail 


page</h2>' 
} 


点 击 Biz 中 的 List 链 接 ，url 路 由 即 为 #1/biz/list， 


页 面 显示 如 下 : 


Home Business 


This is the some business channel 


List Detail 


This is the business list page 


点 击 List 和 Detail 即 可 在 #!/biz/list 和 #1/biz/detail 
之 则 切换 ， 而 顶部 的 This is the some business 
channel 部 分 ， 妈 Biz 组件 中 非 <router-view> 部 分 则 保 
持 不 变 。 


7.1.4 路 由 匹配 


Vue-router 在 设置 路 由 规则 的 时 候 ， 文 持 以 冒 
号 开头 的 动态 片段 。 例 如 在 设计 列表 分 页 的 情况 
下 ， 我 们 往往 会 在 中 带 入 列表 的 页 人 码 ， 路 由 规则 
就 可 以 这 么 设计 : 





router.map({ 
'/list/:page': { 
component : { 
template: "<h1>This is the No.{{ $route.params.p 
age }} page</h1>' 
} 


例如 MisVv1，yVlisV2 〈 单 束 /list 路 径 并 不 会 匹配 ) 
这 样 的 路 径 名 就 会 匹配 到 对 应 的 组 件 中 ， 并 在 组 件 
中 通过 路 由 对 象 (this.$route) 的 方式 获取 :page 具 体 的 
E (具体 的 方法 会 在 第 7.1.6 小 节 路 由 对 象 中 解 
释 ) 。 


一 条 路 由 规则 中 支持 包含 多 个 动态 片段 ， 例 
如 : 





router.map({ 
'/list/:page/:pageSize': { 
component : { 
template: '<h1>This is the No.{{ $route.params.p 
age }} page, {{ $route.params.pageSize }} per page</h1> 





eS DIS JPA oA Fr Bc:pagey}, Vue- 
router 还 提供 了 以 * 号 开头 的 全 匹配 片段 。 全 匹配 片 


段 会 包含 所 有 符合 的 路 径 ， 而 且 不 以 "为 间隔 。 例 
如 在 路 由 Mist/:page 中 ， 规 则 能 匹配 省 sV1Vlist/2 路 

径 ， 但 无 法 匹配 /list/1/10 这 样 的 路 径 。 而 /list/*page 
则 可 以 匹配 /list/1, 以 及 /list/1/10 这 样 的 路 径 ， 不 会 
因为 "而 中 断 匹 配 。page 值 也 就 成 为 整个 匹配 到 的 
字符 串 ， 即 1 或 1/10。 


7.1.5 具名 路 由 
在 设置 路 由 规则 时 ， 我 们 可 以 给 路 径 名 设置 一 


个 别名 ， 方 便 进 行路 由 跳 转 ， 而 不 需要 去 记 住 过 长 
的 全 路 径 。 例 如 





router.map({ 
'/list/:page': { 
name: ‘list' 
component : { 
template: '<h1>This is the No.{{ $route.params.pa 
ge }} page</h1>' 
} 


}) 





我 们 就 可 以 使 用 v-link 指 令 链 接 到 该 路 径 





<a v-link="{ name: 'list', params: { page : 1 }}">List< 


/ay> 


7.1.6 ”路 由 对 象 

在 使 用 Vue-router 局 动 应 用 时 ， 每 个 匹配 的 组 
件 实例 中 都 会 被 注入 router 的 对 象 ， 称 之 为 路 由 对 
象 。 在 组 件 内 部 可 以 通过 this.$route 的 方式 进行 调 
H- 

路 由 对 象 总 共 包 含 了 以 下 几 个 属性 : 
1. $route.path 


ARAVA EF, Ay SHER A ER A, 
/list/1。 





2. $route.params 


KANN RB. ELA ER Pon Fr BAe DO 
段 的 键 值 对 。 如 上 述 例子 中 的 MisVy:page 路 径 ， 吏 可 
以 通过 this.$route.params.page 的 方式 来 获取 路 径 上 
page 的 值 。 





3. $route.query 





关 型 为 对 象 。 包 含 路 由 中 得 询 参数 的 键 值 对 。 
例如 /list/1?sort=createTime, 通过 
this.$route.query.sort 即 可 得 到 createTime。 


4. $route.router 


即 路 由 实例 ， 可 以 通过 调用 其 go，replace 方 法 
进行 跳 转 。 我 们 在 组 件 实例 中 也 可 以 直接 调用 
this.$router 来 访问 路 由 实例 。router 有 具体 的 属性 和 api 
方法 将 在 7.1.10 路 由 实例 中 进行 说 明 。 


5. $route.matched 


类 型 为 数组 。 包 含 当 前 匹配 的 路 径 中 所 有 片段 
对 应 的 配置 参数 对 象 。 例 如 在 /list/1?sort= 
createTime 路 径 中 ，$route.matched 值 如 下 : 

















pone VueComp pt } 
fullPat 1 page” 
path: “/list/*page" 
: Object 
isDy mic: true 
¥ params: Object 
age: “1” 
: Object 
: Object 
length: 1 
v queryParams: Object 
sort: “createTime” 
p : Object 


6. $route.name 


类 型 为 字符 串 ， 即 为 当前 路 由 设置 的 name 属 
Tee 





7.1.7 v-link 


v-linkvue-router)Y H F H Tee ela Res Fa 
令 ， 其 本 质 是 调用 路 由 实例 router 本 里 的 go 函数 进 
行 跳 转 。 该 指令 接受 一 个 JavaScript 表 达 式 ， 而 且 可 
以 直接 使 用 组 件 内 绑 定 的 数据 。 


第 见 的 使 用 方式 包含 以 下 两 种 : 

1) 直接 使 用 字面 路 径 : 

<a v-link="home">Home</a> // 注意 这 里 双 
引号 里 的 home 需 要 加 上 单 引 号 ， 不 然 会 变 成 恋 取 组 
件 data 属 性 中 的 home 值 。 

或 者 写成 : <a v-link="{ path: 


‘home'}">Home</a> 


2) 使 用 具名 路 径 ， 并 可 以 通过 params 或 duery 
设置 路 径 中 的 动态 片段 或 得 询 变 量 : 


























<a v-link="{ name : ‘list', params: { page : 1}}">List 


Page 1</a> 


此 外 ，v-link 还 包含 其 他 参数 选项 : 
1. activeClass 


类 型 为 字符 串 ， 如 果 当 前 路 径 包 售 v-link 中 path 
的 值 ， 该 元 际会 自动 添加 activeClass 值 的 类 名 ， 默 
认为 v-link-active。 








2. exact 


类 型 为 布尔 值 。 在 判断 当前 是 否 为 活跃 路 径 
时 ，v-link 默 认 的 匹配 方式 是 包容 性 匹配 ， 即 如 果 v- 
link 中 path 为 Mist， 那 以 Mist 路 径 为 开头 的 所 有 路 径 均 
为 活跃 路 径 。 而 设置 exact 为 true 后 ， 则 只 有 当 路 径 
完全 一 致 时 才 认 定 为 活跃 路 径 ， 然 后 深 加 class 类 
ae 








3. replace 


类 型 为 布尔 值 。 看 replace 值 设 定 为 tue， 则 点 
击 链接 时 执行 的 是 router.replace() 方 法 ， 而 不 是 
router.g0() 方 法 。 由 此 产生 的 跳 转 不 会 留 下 历史 记 
录 。 


4. append 


类 型 为 布尔 值 。 若 append 值 设 定 为 tue， 则 确 
保 链 接 的 相对 路 径 添 加 到 当前 路 径 之 后 。 例 如 在 路 
径 /list 下 ， 设 置 链接 <a v-link="{path: '1', append : 
true}j">1</a>， 点 击 则 路 径 变化 为 /lisVy1;， BAKE 
append:true, 路 径 变化 为 /1。 


7.1.8 路 由 配置 项 


在 创建 路 由 器 实例 的 时 候 ，Vue-router 提 供 了 
以 下 参数 可 供 我 们 配置 .: 


1. hashbang 


默认 值 为 tue， 即 只 在 hash 模 式 下 可 用 。 当 
hashbang 值 为 true 时 ， 所 有 的 路 径 会 以 太 为 开头 。 例 
如 <a v-link="{ path : VYhome'}">Home</a>， 浏 览 器 
ee 4 Bl Ahttp://hostname/#!/home 


2. history 


默认 值 为 false。 设 为 true 时 会 启动 HTML5 
history 模 式 ， 利 用 history.pushState() 和 
history.replaceState() 来 管理 浏览 历史 记录 。 由 于 使 
用 了 history 模 式 管 理 ， 所 以 使 用 pushState 生 成 的 每 








个 url 都 需要 在 Web 服 务 器 上 有 对 应 的 啊 应 ， 人 否则 单 
cea” 2 1B [E1404 Fer R, 并 且 在 本 地 开发 的 时 
te, TEOMA PRA AEH Gi localhost 
访问 应 用 ， 而 不 是 直接 访问 文件 ) 。 


第 见 的 服务 右 nginx 可 以 修改 其 目录 下 的 
conf/nginx.conf 或 conf/vhost/*.conf 文 件 ， 添 加 如 下 
配置 ， 以 满足 pushSate 的 需求 : 





server { 
listen 80; // 端口 号 
server_name localhost; // 或 填写 服务 器 域名 
index index.html index.php;  ”// 默 认 访 问 文件 
root /www // 文件 放置 路 径 
location / 


{ 
// 这 是 一 个 正则 匹配 ， 将 所 有 该 域名 下 的 ur1 请 求 ， 都 返回 SPA 


应 用 的 index.htm1， 确 保 pushstate 有 响应 
rewrite ^(.+)$ /index.html last; 

} 
} 





3. abstract 


默认 值 为 false。 提 供 了 一 个 不 依赖 于 浏览 器 的 
历史 管理 工具 。 在 一 些 非 浏览 右 场 景 中 会 非常 有 
用 ， 例 如 electron( 架 面 软件 打包 工具 ， 类 似 于 
node-webkit) 或 者 cordova (native app 打 包工 具 ， 


前 里 为 phonegap〉 MH. 
4. root 


默认 值 为 nuall， 仅 在 HIML5 history 模 式 下 可 
用 。 可 设置 一 个 应 用 的 根 路 径 ， 例 如 : /app。 这 样 
应 用 中 的 所 有 跳 转 路 径 都 会 默认 加 在 这 个 根 路 径 之 
后 ， 例 如 <a v-link=vhome'>Home</a>， 路 径 即 变化 
为 /app/home。 


5. linkActiveClass 


默认 值 为 v-link-active。 与 v-link 中 的 
activeClasss 选 项 类 似 ， 这 里 相当 于 是 一 个 全 局 的 设 
定 。 人 符合 匹配 规则 的 链接 即 会 加 上 ]inkActiveClass 
设 定 的 类 名 。 








6. saveScrollPosition 


默认 值 为 false， 仅 在 HIML5 history 模 式 下 可 
用 。 当 用 户 点 击 后 退 按钮 时 ， 借 助 HIML5 history 
中 的 popstate 事 件 对 应 的 state 来 重 置 页 面 的 滚动 未 
知 。 需 要 注意 的 是 ， 当 router-view 设 置 了 场景 切换 
效果 时 ， 访 属性 不 一 定 能 生效 。 


7. transitionOnLoad 


默认 值 为 false。 在 router-view 中 组 件 初 次 加 载 
时 是 否 使 用 过 渡 效 果 。 默 认 情 况 下 ， 组 件 在 初次 加 
载 时 会 直接 泻 染 ， 不 使 用 过 渡 效 果 。 


8. suppressTransitionError 


默认 值 为 false。 设 定 为 true 后， 将 忽略 场景 切 
sels FB RLS AY o 


7.1.9 route 钩子 函数 


在 使 用 Vue-router 的 应 用 中 ， 每 个 路 由 匹配 到 
的 组 件 中 会 多 出 一 个 route 选 项 。 在 这 个 选项 中 我 们 
可 以 使 用 路 由 切换 的 钩子 函数 来 进行 一 定 的 业务 好 
辑 操作 。 以 下 面 代码 为 例 ， 介 绍 这 些 钩 子 函 数 的 运 
行 机 制 和 触发 时 机 。 











var List = Vue.extend({ 
template : '<h1>This is the No.{{ $route.params.page 
}} page</h1>', 
route : { 
data : function(transition) { 
console.log('data'); 
transition.next(); 
Jo 
activate : function(transition) { 
console.log('activate'); 
transition.next(); 


J 


deactivate: function(transition) { 
console. log(deactivate) ; 
transition.next(); 

ie 

canActivate : function(transition) { 
console.log('canActivate' ); 
transition.next(); 

Jo 

canDeactivate : function(transition) { 
console.log('canDeactivate'); 
transition.next(); 

}s 

canReuse : function(transition) { 
console.log('canReuse' ); 
return true; 


} 
} 
}); 





由 上 面 这 个 例子 可 以 看 出 ，route 提 供 了 6 个 钧 
子 图 数 ， 分 别 如 下 。 


canActivate(): 在 组 件 创 建 之 前 被 调用 ， 验 证 组 
件 是 否 可 被 创建 。 


activate(): 在 组 件 创 建 旦 将 要 加 载 时 被 调用 。 


data(): 在 activate 之 后 被 调用 ， 用 于 加 载 和 设置 
当前 组 件 的 数据 。 


canDeactivate(): 在 组 件 被 移出 前 被 调用 ， 验 证 
Fe FS A AAS H o 


deactivate(): 在 组 件 移出 时 调用 。 


canReuse(): 决 定 组 件 是 否 可 被 重用 。 这 种 场景 
通常 发 生 在 /list/1 切 换 到 /list/2 时 ， 如 果 canReuse 返 
回 值 为 tue， 则 组 件 在 切换 后 会 略 过 canActivate 和 
activate AE, By H datat T RAR Æ 
canReuse 返 回 值 为 false， 则 需 完 整 经 历 激 活 的 三 个 
EJT eh BX o 


我 们 可 以 利用 上 文中 的 List 组 件 设置 一 个 路 由 
规则 : 


router.map({ 
‘/home': { 
component: { 
template : '<h1l>This is the home page</h1>', 


} 


J 
'/list/:page': { 
component : List 





在 home 和 1list 之 间 切 换 ， 我 们 可 以 看 到 控制 合 


输出 结果 如 下 : 

















在 每 个 钩子 函数 中 ， 都 接受 一 个 transition 对 象 
作为 参数 ， 我 们 称 之 为 切换 对 象 。 主 要 包含 以 下 属 
性 和 方法 。 


transition.to: 将 要 切换 到 路 径 的 路 由 对 象 〈 路 
由 对 象 详 见 第 7.1.6 小 节 ) 。 


transition.from: 当前 路 径 的 路 由 对 象 。 

transition.next(): 可 以 通过 调用 该 方法 使 切换 过 
程 进入 下 一 阶段 ， 这 样 也 就 支持 了 在 钩子 函数 内 部 
使 用 异步 方法 的 情况 。 比 如 进入 某 个 路 径 前 我 们 需 
要 校 验 用 户 是 否 具 有 某 种 权限 ， 而 这 一 般 需 要 和 后 

















端 进行 数据 交互 来 进行 验证 。 我 们 只 需要 在 异步 的 
回调 函数 中 执行 transition.nextO 即 可 确保 在 获取 到 
数据 后 才 执行 切换 过 程 的 下 一 阶段 。 


transition.abort([reason]): 调用 该 方法 可 以 终止 
或 者 拒绝 此 次 切换 。 需 要 注意 的 是 ， 在 activate 和 
deactivate 中 调用 该 方法 时 并 不 会 把 应 用 退 到 前 一 个 
路 由 状态 ， 只 有 在 canActivate 和 canDeactivate 内 调 
用 才 会 回 退 。 


transition.redirect(path): 取消 当前 切换 并 重 定 问 
到 另 一 个 路 由 。 参 数 接受 字符 串 或 者 路 由 对 象 ， 并 
有 旦 如 果 不 设 定 新 的 params 和 query 的 话 ， 会 保留 原始 


transition.to 的 params 和 qduery。 


丸 外 ， 这 些 钩子 函数 在 切换 过 程 中 也 起 到 了 不 
同 的 作用 ， 我 们 分 类 说 明 如 下 。 


activate/deactivate: 返回 值 可 为 Promise 对 象 。 
ES6 提 供 了 原生 的 Promise 对 象 ， 可 以 通过 直接 返回 
Promise.resolve(true)/Promise.reject([reason]) 来 控制 
是 否 进行 切换 的 下 一 步 ， 或 者 返回 return new 
Promise(function (resolve, reject) 
{resolve(true)/reject([reason]) }). 











canActivate/canDeactivate: 返回 值 可 以 是 同 


activate/deactivate 一 样 的 Promise 对 象 ， 也 可 以 是 布 
尔 值 true/false， 和 使 用 切换 对 象 


transition.next(OyVtransition.abortO 效 果 一 致 。 


data:data 钧 子 在 每 次 路 由 变动 的 时 候 都 会 被 调 
用 ， 特 别 是 当 组 件 被 重用 时 ， 往 往 跳 过 activate 只 执 
行 data 函 数 ， 如 上 述 例子 中 的 /list/1 切 换 到 /lisy2。 所 
以 我 们 经 和 党 把 加 载 动态 数据 放 在 data 钧 子 中 执行 ， 
而 且 当 组 件 从 activate 切 换 到 data 钩 子 时 ， 会 得 到 一 
个 $loadingRouteData 属 性 ， 默 认 值 为 tue， 当 data 孙 
数 执行 完 进 入 下 一 步 时 将 切换 成 false。 这 样 有 助 于 
我 们 做 一 些 loading 等 待 方面 的 处 理 ， 避 人 免 用 户 长 时 
SHA ein. SRF AKANE, Baal 
以 在 调用 data 函 数 的 transition.next(data) 时 传 入 一 个 
o 可 以 为 组 件 的 data 附 上 相应 的 属性 值 。 
列 如 : 








route: { 
data : function(transition) { 
transition.next({ page : transition.to.params.page 





这 样 束 可 以 赋值 给 了 组 件 的 data.page。 男 外 ， 


还 可 以 通过 Promise 的 then 回 调 函 数 中 的 返回 值 来 设 
a Blan: 


route: { 
data : function() { 
return Promise.all([ 
// 后 端 数 据 接口 ， 需 要 符合 Promise 形 式 ， 或 可 通过 vue-re 
source 插 件 实现 
// 详情 可 见 第 7.2 节 中 的 vue-resource 的 相关 说 明 
userService.getInfo(), 
productsService.getList() 
]).then(function(reps) { 
return { 
user : reps[@], 
products : reps[1] 
} 





7.1.10 ”路 由 实例 属性 及 方法 


在 Vue-router 局 动 的 应 用 中 ， 每 个 组 件 会 被 注 
入 router 实 例 ， 可 以 在 组 件 内 通过 this.$router (或 者 
使 用 路 | Z Sroute.router ) 进行 访问 。 这 个 router 
实例 主要 包 侣 了 一 些 全 局 的 钩子 函数 ， 以 及 配置 路 
由 规则 ， a 本 节 主 要 介绍 路 由 实 
例 的 主要 属性 和 api 方 法 。 








主要 的 公开 属性 有 以 下 两 个 。 
1. router.app 


类 型 为 组 件 实例 ， 即 为 路 由 管理 的 根 Vue 实 
例 ， 是 由 调用 router.startO0 传 入 的 Vue 组 件 构造 器 函 
数 创建 的 。 


2. router.mode 


类 型 为 String， 值 可 以 为 HTML5, hash 或 
abstract， 表 示 当 前 路 由 所 采取 的 模式 。 

第 见 api 方 法 如 下 : 
1. router.start(App, el) 


局 动 路 由 应 用 ， 通 过 传 入 的 组 件 构 造 右 App 太 
挂 载 元 素 el 创 建 根 组 件 。 


2. router.stop() 


停止 监听 popstate 和 hashchange 事 件 。 调 用 此 方 
法 后 ，router.app 没 有 被 销毁 ， 仍 可 以 使 用 
router.go(path) 进 行 跳 转 ， 也 可 以 不 使 用 参数 直接 调 
用 router.start(0) 来 重启 路 由 。 


3. router.map() 


定义 路 由 规则 的 方法 。 包 含 component 和 
subRoutes 两 个 字段 ， 主 要 用 于 ud 匹配 的 组 件 及 般 套 
路 由 。 设 定 的 路 径 也 可 以 通过 :冒号 或 * 号 的 方式 进 
行 匹 配 ， 传 递 到 路 由 对 象 $route.params 中 。 


4. router.on() 


添加 一 条 顶级 的 路 由 配置 ， 用 法 和 router.map 
类 似 。 例 如 : 








router.on('/home', { 
component : { 
template : '<h1>This is the home page.</h1>' 


} 
}); 





5. router.go(path) 


跳 转 到 一 个 新 的 路 由 。 path 可 以 是 字符 串 也 可 
以 是 包含 跳 转 信 息 的 对 象 。 奉 使 用 字符 串 时 ，url 直 
接 蔡 换 成 path 的 值 。 如 果 path 不 以 /开头 ， 则 直接 添 
加 到 当前 ne HJE o Pa 则 文 持 以 下 两 种 
格式 : 第 一 种 为 {path :'...', append: true }， 这 种 形 




















式 同 直接 使 用 字符 串 类 似 , append Anyi, A 
设置 成 true， 则 确保 path 相 对 路 径 被 添加 到 当前 路 径 
之 后 ; 第 二 种 为 { name :'..', params : {}, query:{}}, 
name 为 具名 路 径 ，params 和 query 为 可 选 。 另 外 ， 
这 两 种 格式 都 文 持 replace 选 项 ， 知 replace 设 置 为 
true， 则 该 跳 转 不 产生 一 个 新 的 历史 记录 。 








7.1.11 vue-router 2.0 的 变化 


随 着 Vue.js 升 级 到 2.0 后 ，Vue-router 也 相应 做 了 
升级 。 除 了 适 配 Vue.js 2.0 外 ，vue-router 2.0%} H F 
的 使 用 方式 ， 属 性 及 钓 子 函数 也 做 出 了 明显 的 改 
变 。 本 节 主 要 从 以 下 几 个 方面 进行 说 明 。 


1. EHAA 


VueRouter 的 初始 化 方式 、 路 由 规则 配置 和 局 
动 方式 均 发 生 了 变化 ， 例 如 : 





const router = new VueRouter({ 
// 路 由 规则 在 实例 化 VueRouter 的 时 候 就 直接 传 入 ， 而 不 是 调用 m 
ap 方法 再 进行 传递 
routes : [ 
{ path : '/home', component: Home} 


] 


}) 
// 启动 方法 也 发 生 了 变化 ，router 实 例 直 接 传 入 Vue .js 实例 中 ， 并 
调用 $mount 方 法 挂 载 到 DOM 元 素 中 


const app = new Vue({ 
router : router 
}).$mount('#app' ) 





HRS NBC IE ARE AB, KH 
children 属 性 来 进行 标记 ， 而 且 其 中 的 path 路 径 不 需 
要 以 /开头 ， 人 否则 会 认为 从 根 路 径 开 头 。 





const router = new VueRouter({ 
routes: [ 
{ 
path: '/biz', 
component: Biz, 
children: [ 


path: ‘list', 
component: List 


J 


path: 'detail', 
component: Detail 





2. 跳 转 方式 


路 由 跳 转 的 方式 也 发 生 了 变化 ， 首 先是 废弃 了 
Vv-link 指 令 ， 采 用 <router-link> 标 签 来 创建 a 标签 来 定 
义 链接 。 例 如 : 


<router-link to="/home"> 


Home 
</router-link> 





其 中 的 to 属性 和 v-link 所 能 接受 的 属性 相同 ， 例 


0{ name : ‘home’, params: {....}}。 


其 次 使 用 router 实 例 方法 进行 跳 转 的 api 也 修改 
成 了 push0, 接受 的 选项 参数 基本 没有 变化 ， 例 如 : 


router.push({ name : ‘home', params : {...} }) 





router.go0) 方 法 不 再 表示 跳 转 ， 而 是 接受 一 个 
整 型 参数 ， 作 用 是 在 history 记 录 中 向 前 或 者 后 退 多 


少 步 ， 类 似 window.history.go(n)。 





router 实 例 的 api 方 法 push()、replace()、go0 主 


要 是 模拟 window.history 下 的 pushState()、 
replaceState() 和 go() 的 使 用 方法 来 实现 的 ， 并 且 确 保 
router 在 不 同 模式 下 (hash、history) 表现 的 一 致 

TE 


3. FF AŽ 


Vue-router 基 本 重新 定义 了 自 丑 的 钩子 函数 ， 
我 们 可 以 将 其 分 为 三 个 方面 : 


1) 全 局 钧 子 。 在 初始 化 YueRouter 后 直接 使 用 
router 实 例 进 行 注 册 ， 包 含 beforeEach 和 afterEach 两 
个 钩子 ， 在 每 个 路 由 切换 前 /后 调用 。 











router.beforeEach((to, from, next) => { 

// to: 即将 要 进入 的 路 由 对 象 

// from: 当前 正 要 离开 的 路 由 对 象 

// next: 进行 下 一 状态 ， 切 记 ， 一 定 要 在 结束 业务 逻辑 后 调用 ne 
Xt, AAP ST eh BBA ae resolved 
}) 


router.after(route=> { 
// route: 进入 的 路 由 对 象 
}) 





2) 单个 路 由 钩子 。 这 个 需要 在 路 由 配置 的 时 
IRERE, Pan: 





const router = new VueRouter({ 
routes: [ 


path: '/home', 
component: Home, 
beforeEnter: (to, from, next) => { 


// BRAM ats fbeforeEach—2 





3) 组 件 内 钩子 。 在 组 件 内 定义 ， 例 如 : 


const Home = { 
template: ~... , 
beforeRouteEnter (to, from, next) => { 
// 参数 与 全 局 钩子 peforeEach 一 致 
// 切记 当前 钩子 执行 时 ， 组 件 实例 还 没 被 创建 ， 所 以 不 能 调用 
组 件 实例 this 
J 


beforeRouteLeave (to, from, next) => 


// 路 由 切换 出 该 组 件 时 调用 ， 此 时 仍 可 以 访问 组 件 实例 ` this 





4. 获取 数据 


由 于 钩子 函数 的 变化 ， 在 Vue.js 2.0 中 也 就 不 存 
在 使 用 data 钩 子 来 处 理 请 求 数 据 的 逻辑 了 ， 可 以 通 
过 监听 动态 路 由 的 变化 来 获取 数据 。 例 如 : 


const List = { 
template: ‘...' 
watch: { 
'$route' (to, from) 


{ 
// 对 路 由 变化 作出 啊 应 ， 在 此 处 理 业 务 逻 辑 











而 且 在 Vue.js 2.0 中 ， 我 们 既 可 以 在 导航 完成 之 
前 获取 数据 ， 也 可 以 在 导航 完成 之 后 获取 数据 。 在 
导航 完成 之 后 获取 数据 ， 是 为 了 在 获取 数据 期 间 展 
示 一 个 loading 状 态 ， 我 们 可 以 在 组 件 的 createO) 钩 子 
= a : { route :''} Fiji] H IRE AE H R A, 
UN: 














export default { 
data () { 
return { 


i Ga 


Jo 

created () { 
// 组 件 创建 完 后 获取 数据 
this.fetchData() 


watch: { 
// 如 果 路 由 有 变化 ， 会 再 次 执行 该 方法 
‘$route': 'fetchData' 
Jo 
methods: { 
fetchData () { 
// 调用 异步 请 求 获取 数据 


} 
} 
} 








在 导航 获取 之 前 完成 数据 ， 我 们 可 以 在 
beforeRouteEnter 钩 子 中 获取 数据 ， 并 且 只 有 当 数 气 








获取 成 功 或 确定 有 权限 后 才 进 行 组 件 的 泻 染 ， 人 否则 
就 回 退 到 路 由 变化 前 的 组 件 状态 。 例 如 : 





import pageSrv from './api/pages' // 此 处 先 模拟 一 个 获取 
数据 的 模块 


export default { 
data () { 
return { 
list : [] 
} 


J 


beforeRouteEnter (to, from, next) { 
pageSrv.get(to.params.page, (err, data) => 


if (err) { 
next(false); // 中 断 当前 导航 
} else { 


next(vm => { 
vm. list = data; 


}) 


Jo 
watch: { 
$route () { 
this.list = null; 
pageSrv.get(this.$route.params.id, (err, data) = 


> { 
if (err) { 
// 处 理 展示 错误 的 逻辑 
} else { 
this.list = data; 
} 
}) 





5. 命名 视图 





Vue-router 2.0 中 人 允许 同 级 展示 多 个 视图 ， 而 不 


是 舱 套 展示 ， 可 以 通过 给 <router-view> 添 加 name 属 





性 的 方式 匹配 不 同 的 组 件 ， 如 果 没 有 设置 name， 默 
认为 default。 例 如 : 


<router-view></router-view> 
<router-view name='main'></router-view> 
const router = new VueRouter({ 

routes: [ 


path: ‘/', 
components: { // 要 注意 这 里 的 属性 是 components， 而 
不 是 component 
default: Nav, 


main: Main 





7.2 Vue-resource 


在 实际 开发 SPA 应 用 时 ， 一 般 和 后 端 都 会 采用 
异步 接口 进行 数据 交互 。 传 统 情况 下 ， 我 们 常用 
jQuery 的 $.ajax() 方 法 来 做 异步 请 求 。 但 Vue.js 并 不 
依赖 于 jQuery， 我 们 也 并 不 需要 为 了 异步 请 求 这 个 
功能 就 额外 引用 jQuery。 所 以 这 里 就 和 大 家 介绍 下 
Vue.js 的 插件 Vue-resouce， 它 同样 对 异步 请 求 进行 
了 封装 ， 方 便 我 们 同 服务 端 进行 数据 的 交互 。 本 市 
以 Vue-resource 1.0.2 版 本 进行 说 明 。 


7.2.1 引用 方式 


同 vue-router 类 似 ， 我 们 可 以 直接 引用 vue- 
resource 的 CDN 路 径 : 








<script src="https://cdn.jsdelivr.net/vue.resource/1.6. 
2/vue-resource.min.js"></script> 





也 可 以 通过 npm install vue-resource 方 式 进行 安 
装 ， 并 通过 Vue.use0) 方 法 进行 调用 : 


import VueResource from 'vue-resource' ; 


Vue.use(VueResource) ; 





7.2.2 ”使 用 方式 


安装 好 Vue-resource 之 后 ， 在 Vue 组 件 中 ， 我 们 
残 可 以 通过 this.$http 或 者 使 用 全 局 变量 Vue.http 友 起 


异步 请 求 ， 例 如 : 





var List = Vue.extend({ 
route : { 
// vue-router 中 的 data 和 钩子 函数 ， 
data : function(transition) { 
// 运 行 这 段 代 码 需 要 在 服务 器 环境 中 ， 即 localhost 下， 直接 
访问 文件 运行 这 段 代码 会 抛 出 异 营 
this.$http 
.get('/api/list?pageNo=' + transition.to.param 
s.page); 
.then(function(rep){ 
// 成 功 回调 函数 
transition.next({ 
list : rep.data 
})3 
}, function(rep) { 
// 失败 回调 函数 
transition.next({ 
data : rep.data 
})3 
})3 


J 
template: '<h1>This is the list page</h1>' 


}) 





this.$http 文 持 Promise 模 式 ， 使 用 .then 方 法 处 理 





回调 函数 ， 接 受 成 功 / 失 败 两 个 回调 函数 ， 一 般 会 在 
回调 函数 中 再 调用 transition.nextO) 方 法 ， 给 组 件 的 
data 对 象 赋值 ， 并 执行 组 件 的 下 一 步骤 。 


7.2.3 $http 的 api 访 法 和 选项 参数 


this.$http 可 以 直接 当做 函数 来 调用 ， 我 们 以 下 
面 这 个 例子 来 对 其 选项 进行 说 明 : 











this.$http({ 
url : '/api/list', // url 访 问 路 径 


method : '', // HTTP 请 求 方 法 ， 例 如 GET, POST,PUT, DEL 
ETE 等 
body : {}, // _ request 中 的 body 数 据 ， 值 可 以 为 对 象 ，S 


tring 类 型 ， 也 可 以 是 FormData 对 象 

params : {}, // get 方 法 时 url1 上 的 参数 ， 例 如 /api/1ist? 
page=1 

headers: {}, // 可 以 设置 request 的 header 属 性 

timeout : 1500, // 请 求 超时 时 长 ， 单 位 为 毫秒 ， 如 果 设 置 为 
8 的 话 则 没有 超时 时 长 

before : function(request) {}, // 请 求 发 出 前 调用 的 函数 
， 可 以 在 此 对 request 进 行 修改 

progress: function(event) {}, // 上 传 图 片 、 音 频 等 文件 





时 的 进度 ，event 对 象 会 包含 上 传 文件 的 总 大 小 和 已 上 传 大 小 ， 通 香 
可 以 用 来 作为 进度 条 效果 

credentials : boolean, // 默认 情况 下 ， 跨 域 请 求 不 提供 任 
据 (cookie、HTTP 认 证 及 客户 端 SSL 证 明 等 ) 。 该 选项 可 以 通过 将 XMLH 
ttpRequest 的 withCredentials 属 性 设置 为 true， 即 可 以 指定 某 个 
请 求 强制 发 送 赁 据 。 如 果 服 务 器 接收 带 赁 据 的 请 求 ， 会 用 Access-Con 
trol-Allow-Credentials: trueHTTP 头 部 来 啊 应 

emulateHTTP: boolean, // 设置 为 true 后 ，PUT/PATCH/DELE 
TE 请 求 将 被 修改 成 POST 请 求 ， 并 设置 header 属 性 X-HTTP-Method-Ov 
erride。 常 用 于 服务 端 不 支持 REST 写 法 时 

emulateJSON : boolean // 设置 为 true 后 ， 会 把 request bo 
dy 以 application/x-www-form-urlencoded 的 形式 发 送 ， 相 当 于 fo 
rm 表单 提交 。 此 时 http 中 的 header 的 content-type 即 为 applicati 





on/x-www-form-urlencoded。 常 用 于 服务 器 端 未 使 用 application 
/json 编 码 时 





此 外 ，this.$http 还 可 以 直接 调用 api 方 法 ， 相 当 
于 提供 了 一 些 快捷 方式 ， 例 如 : 





get(url, [options]) 
head(url, [options] ) 
delete(url, [options] ) 
jsonp(url, [options ]) 
post(url, [body], [options] ) 


put(url, [body], [options ]) 
patch(url, [body], [options]) 





以 上 方法 均 可 以 采用 this.$http.get(url, options) 
或 Vue.http.get(url, options) 这 样 类 似 的 形式 进行 调 
用 。 





在 发 起 异步 请 求 后 ， 我 们 可 以 采用 
this.$http.get(...).then() 的 方式 处 理 返 回 值 。.then() 接 
受 一 个 response 的 参数 ， 有 具体 的 属性 和 方法 如 下 。 


url: response 的 原始 url。 


body: response 的 body 数 据 ， 可 以 为 Object， 
Blob， 或 者 String 类 型 。 


headers: response 的 Headers 对 象 。 


ok: 布尔 值 ， 当 HTTP 状 态 码 在 200 和 299 之 间 时 
为 true。 


status: response 的 HTTP 状 态 码 。 
statusText: response 的 HITP 状 态 描述 。 
另外 还 包含 以 下 三 种 api 方 法 。 


text(): Promise 类 型 ， 把 response body 解 析 成 字 
从 Fa o 


json(): Promise 类 型 ， 把 response body 解 析 成 
json 对 象 。 


blob(): Promise 类 型 ， 把 response body 解 析 成 
blob 对 象 ， 即 二 进 制 文件 ， 多 用 于 图 片 、 音 视频 等 
交 作 处理 。 


7.2.4 FERB 


拦截 器 主要 作用 于 给 请 求 添 加 全 局 功能 ， 例 如 
身份 验证 、 错 误 处 理 等， 在 请 求 发 送 给 服务 器 之 前 
或 服务 器 返回 时 对 requestresponse 进 行 拦 截 修改 ， 
完成 业务 逻辑 后 再 传递 给 下 一 步骤 。Vue-resource 
也 提供 了 拦截 器 的 具体 实现 方式 ， 例 如 : 








Vue.http.interceptors.push(function(request, next) { 
// 修 改 请 求 
request.method = 'POST'; 
// 继续 进入 下 一 个 拦截 器 


next(); 


3 





也 可 以 对 返回 的 response 进 行 处 理 : 


Vue.http.interceptors.push(function(request, next){ 
request.method = 'POST'; 


next(function(response) { 
// 修改 response 
response.body = '...'; 








或 者 直接 拦截 返回 response， 并 不 向 后 端 发 送 
请 求 : 


Vue. http.interceptors.push(function(request, next) { 
// body 可 自己 定义 ，request.respondWith 会 将 其 封装 成 resp 
onse， 并 赋值 到 response.body 上 
next(request.respondWith(body, { 
status: 403, 
statusText: 'Not Allowed 


})); 
}); 





7.2.5 $resource}H yt 


Vue-resource 提 供 了 一 种 与 RESTful API 风 格 所 
匹配 的 写法 ， 通 过 全 局 变量 Vue.resource 或 者 组 件 
实例 中 的 this.$resource 对 某 个 符合 RESTful 格 式 的 url 
进行 封装 ， 使 得 开发 者 能 够 直接 使 用 增删 改 查 等 基 








础 操作 ， 而 不 用 目 己 再 额外 编写 接口 。 


我 们 先 大 致 说 明 下 RESTful API: 这 是 一 种 设 
计 风 格 而 不 是 标准 ， 只 是 提供 了 一 组 设计 原则 和 约 
束 条 件 。 它 主要 用 于 客户 问 和 服务 器 交互 类 的 软 
件 。 基 于 这 个 风格 设计 的 软件 可 以 更 人 简洁， 更 有 层 
次 ， 更 易于 实现 绥 存 等 机 制 。 在 这 种 风格 中 ， 每 个 
ul 路径 代 表 一 种 资源 (resource) ， 所 以 路 径 中 不 
推荐 有 动词 ， 只 能 有 名 词 ， 而 且 所 用 的 名 词 往往 与 
数据 库 的 表格 名 对 应 ， 且 一 般 采 取 复 数 的 形式 命 
名 。 而 对 于 资源 的 具体 操作 类 型 ， 则 由 HTTP 动 词 
表示 ， 妈 GET/POST/PUT/PATCH/DELETE 等 。 


我 们 以 产品 products 为 例 ， 设 计 出 的 api 即 为 。 


GET /api/products,: 获取 所 有 产品 列表 。 














POST /api/products: 新 建 一 个 产品 。 


GET /api/products/:id: 获取 某 个 指定 产品 信 


CI 


PUT /api/products/:id: 更 新 某 个 指定 产品 信 


CI 


DELETE /api/products/:id: 删除 某 个 指定 产 


GET /api/products/:id/items: 获取 某 个 指定 产品 
下 的 items 信 息 列 表 。 


在 需要 对 信息 进行 过 滤 的 情况 下 ， 以 query 参 
BU SWEAT fii , ot. 


GET /api/products?limit=10&0ffset=10&sortBy=name 





简单 说 明 完 RESTfu 后 ， 结 合 this.$resource， 我 
们 可 以 使 用 与 后 端 接 口 对 接 : 





var products = this.$resource('/api/products{/id}'); 
// 相当 于 发 起 异步 GET 请 求 ， 访 问 /api/products/1 接 口 ， 获 取 指 
定 产 品 信 息 
products 

.get({ id : 1}) 

.then(function(rep) { 

this.$set('products', rep.json()); 

}) 
// POST /api/products 参数 为 data， 新 建 一 个 产品 
products 

.Save({}, data) 

.then(function(rep) { 


as 





Vue-resource 提 供 了 6 个 默认 动作 行为 ， 分 别 
为 : 


get: {method: 'GET'}, 

Save: {method: 'POST'}, 
query: {method: 'GET'}, 
update: {method: 'PUT'}, 
remove: {method: 'DELETE'}, 


delete: {method: 'DELETE'} 





除了 默认 行为 外 ，Vue-resource 也 人 允许 我 们 目 
定义 行为 ， 例 如 : 


var customActions = { 
order : { method: 'POST', url : '/api/products{/id}/o 


var products = this.$resource('/api/products{/id}'); 
// 即 调用 异步 接口 POST /api/products/1/orders 


products 
.order({ id : 1}) 
.then(function(rep) { ... }) 





7.2.6 ”封装 Service 层 


在 编写 SPA 应 用 中 ， 我 们 通常 会 把 和 后 端 做 数 
据 交互 的 方法 封装 成 一 个 Service 模 块 ， 供 不 同 的 组 
件 进行 使 用 。 我 们 可 以 新 建 一 个 文件 夹 api， 将 
Service 模 块 集中 起 来 ， 并 按 资 源 进行 分 类 。 


以 上 述 products 资 源 为 例 : 


/api/products.js 
const API_URL = '/api/products; 
export default { 
get(context, productId) { 
return context. $http({ 
url : API_URL + '/' + productId, 
method : ‘get' 


})s 


query(context, params) { 


return context. $http({ 
url : API_URL, 
params : params 





在 组 件 中 调用 方式 如 下 : 





import productsSrv from './api/products.js'; 
var ProductDetail = Vue.component('product-detail', { 


route : { 
data : function(transition) { 
productsSrv 
.query(this, transition.to. params) 
.then(function(rep) { 


}) 





7.3 Vue-devtools 


在 开发 时 我 们 通常 需要 观察 组 件 实例 中 的 data 
属性 的 状态 ， 方 便 进行 调试 。 但 一 般 组 件 实例 并 不 
会 暴露 在 window 对 象 上 ， 我 们 无 法 直接 访问 到 内 部 
的 data 属 性 ; 知 只 通过 debugger 或 console.log 方 法 进 
行 调 斌 难免 太 过 低 效 。 所 以 Vue.js 官 方 出 了 一 丈 
chrome 插 件 Vue-devtools， 它 可 以 在 chrome 的 开发 
者 模式 下 和 直接 查看 当前 页 面 的 Vue 实 例 的 组 件 结构 
和 内 部 属性 ， 方 便 我 们 直接 观测 。 











73:1 ese a 


可 以 通过 Chrome Web Store 直 接 进 行 安装 ， 地 
址 为 : 


https://chrome. google. com/webstore/detail/vuejs-devtool 
s/nhdogjmejiglipccpnnnanhbledajbpd 





也 可 以 通过 源码 手动 安装 。 
1) 下 载 源 码 : git clone 


https://github.com/vuejs/vue-devtools 。 
2) 进入 目录 : cd vue-devtools/。 
3) 安装 依赖 : npm install. 
运行 生成 插件 : npm run build。 
5) 进入 chrome 插 件 管理 页 面 : 


chrome://extensions/. 


6) 勾 选 “ 开 友 者 模式 ”， 扣 击 “ 加 载 已 解压 的 扩 
展 程 厅 ”， 选 择 文件 安装 即 可 。 


7.3.2 ”使 用 效果 


在 Chrome 浏 览 堪 下 访问 Vue.js 应 用 ， 打 开 * 开 发 
者 模式 ”， 会 及 现 多 了 一 个 Vue 的 栏目 ， 如 图 7-1 所 
ZN o 


> = = a z =æ 
[x oO | Elements Console Sources Network Timeline Profiles Resources Security Audits PageSpee 61 
v Instance selected: RouterApp Components Vuex 


图 7-1 


反击 后 即 可 看 到 组 件 的 结构 和 组 件 实 例 中 的 属 
性 ， 并 且 操 击 组 件 内 的 子 组 件 也 可 以 获得 子 组 件 实 





例 的 属性 ， 如 图 7-2 所 示 。 





v <Anonymous Component> DTT Tae RouterApp © InspectDOM [Œ Send to console 
Native 
Descripti $ Object 
GroupList ‘teach 
Rate p Obj 
AlbumList path: "/teachers/1 


> query: Object (empty) 


图 7-2 


另外 ， 点 击 “send to console” 即 可 见 当 前 选中 组 
件 的 $vm 赋 值 到 window.$vm 上， 这 样 在 控制 台中 也 
可 以 对 组 件 进 行 修改 和 调试 。 


第 8 章 ”Vue.js 工 程 实例 


本 章 主 要 介绍 如 何 使 用 Vue.js 进 行 实 际 SPA 项 
目的 开发 ， 包 括 使 用 Vue-router 和 Vue-resource 进 行 
路 由 管理 和 后 端 数 据 交 互 ， 以 及 webpack 和 vue- 
loader 进 行 模 块 化 开发 ， 代 人 码 编 译 和 打包 ， 最 终 通 
过 目 动 部 普 工 具 jenkins 来 对 项 目 进行 目 动 化 部 署 。 


8.1 准备 工作 


在 本 章 中 ， 我 们 会 采用 ES6 的 语法 进行 开发 ， 
并 使 用 vue-loader 和 webpack 进 行 代 码 的 编译 ， 所 以 
本 章 先 介绍 下 这 两 个 工具 的 使 用 方式 和 起 到 的 作 
用 。 


8.1.1 webpack 


webpack 是 一 于 模块 加 载 及 处 理工 具 ， 它 能 把 
各 种 资源 ， 例 如 JS( 含 JSX) 、coffee、 样 式 〈 含 
less/sass) 、 图 片 等 都 作为 模块 来 使 用 和 人 处理 。 也 
束 是 说 ，webpack 可 以 把 ES6 语 法 的 js 文件 ， sass 
式 等 无 法 直接 在 浏览 喜 中 使 用 的 语言 编译 成 浏览 
支持 的 形式 ， 也 可 以 把 需要 的 文件 进行 合并 、 压 颖 
混 清 ， 如 图 8-1 所 示 。 











模块 及 其 依赖 webpack 静态 资源 


MODULE BUNDLER 


图 8-1 


我 们 可 以 使 用 npm install webpack -g 的 方式 全 
局 安装 webpack， 然 后 在 项 目 根 路 径 下 配置 一 个 
webpack.config.js 文 件 ， 例 如 : 





var HtmlWebpackPlugin = require('html-webpack-plugin') 
module.exports = { 
// 页 面 入 口 文件 配置 
entry: { 
index : './src/app.js' 


Jo 
// 入 口 文件 输出 配置 
output: { 
path: './dist, // 输出 目录 
filename: '[name].[hash].js' // 设 置 输出 文件 名 字 ， 此 
例 中 为 入 口 文件 名 字 加 上 hash 值 。 使 用 hash 值 的 原因 是 生成 新 文件 后 
避免 缓存 导致 用 户 没有 更 新 到 新 的 js 文件 
Jo 


module: { 
// 加 载 器 配置 
// 加 载 器 会 把 test 所 匹配 的 文件 加 入 loader 进 行 处 理 
// 例如 下 面 的 babel， 起 到 的 作用 就 是 将 匹配 到 的 js 文件 中 下 
一 代 的 JavaScript (即使 用 ES2815 、es6 等 特性 的 JavaScript) 编 
译 成 能 在 当前 浏览 器 环境 下 运行 的 js 代码 
loaders: [ 
{ 
test: /\.js$/, // test 即 为 匹配 规则 ， 此 处 即 为 将 
所 有 后 级 为 .js 的 文件 加 载 进 来 
loader: 'babel' // loader 即 为 处 理 器 ， 所 有 符合 
规则 的 文件 会 交 由 1oader 进 行 处 理 
exclude: /node modules/ // 
Jo 
// vue-loader 是 对 于 .vue 文 件 专门 的 处 理 器 ， 能 将 .vue 文 
件 中 的 模板 、 样 式 、js 代 码 解 析 并 编译 成 可 执行 的 代码 
{ 


test: /\.vue$/, 
loader: ‘vue' 
Jo 
| ] 
// plugins 为 webpack 的 插件 功能 ， 可 利用 一 些 第 三 方 插件 完成 
一 些 额外 的 操作 
// 例如 HtmlWebpackPlugin， 这 个 插件 可 以 帮助 生成 HTML 文件 
， 在 body 元 素 中 使 用 script 来 引用 output 中 最 后 输出 的 js 文件 
plugins : [ 
new HtmlWebpackPlugin({ 
filename: ‘index.html’, 
template: ‘index.html’, 
inject: true 
}) 
] 
}; 


妃 结 一 下 的 话 ， 上 面 这 个 例子 的 作用 将 会 处 理 
文件 ./src/app.js， 将 其 所 包含 的 依赖 (通过 import 或 
require 引 入 的 其 他 js 和 .vue 文 件 ) 文件 ， 将 其 中 的 
ES6 语 法 编译 成 浏览 喜 能 运行 的 JS 语法 ， 以 及 处 
理 .vue 文 件 中 的 模板 、 样 式 和 JS 代码 ， 最 后 将 其 合 
并 成 一 个 js 文件 ， 输 出 到 output 中 设置 的 路 径 和 名 
称 ， 最 后 通过 HtmlWebpackPlugin 插 件 指 定 的 
index.html 模 板 ， 将 这 个 文件 通过 script 形 式 插 入 到 
<body> 中 ， 最 终生 成 静态 文件 index.html 和 app. 
[hash].js 文 件 。 











8.1.2 vue-loader 


vue-loader 是 webpack 的 一 个 loader 加 载 器 ， 用 
于 处 理 我 们 编写 的 .vue 文 件 。 在 早期 进行 组 件 化 编 
写 时 ， 我 们 往往 会 把 一 个 组 件 的 html、css、js 放 在 
三 个 不 同 的 文件 中 ， 然 后 利用 编译 工具 再 合 到 一 
起 。 这 样 产 生 的 不 便 就 是 文件 过 多 ， 修 改 一 个 组 件 
需要 打开 三 个 文件 ， 开 发 的 过 程 中 经 第 需要 不 断 地 
切换 视窗 。 然 而 vue-loader 的 出 现 ， 使 得 我 们 能 将 一 
个 组 件 的 html、css、js 放 在 一 个 文件 中 ， 用 不 同 的 
标签 包 襄 住 即 可 。vue-loader 会 将 这 三 块 代 码 分 别 编 
译 成 可 执行 的 代码 。 

















使 用 之 前 ， 需 要 先 按 照 vue-loader， 以 及 所 珊 
要 的 用 作 编 译 的 其 他 loader。 


npm install \ 
webpack webpack-dev-server \ 
vue-loader vue-html-loader css-loader vue-style-loade 
vue-hot-reload-api \ 
babel-loader babel-core babel-plugin-transform-runtim 
babel-preset-es2015 \ 


babel-runtime\ 
--Save-dev 





我 们 可 以 这 样 编写 .vue 文 件 : 





<template> 
<ul> 


<li><a v-link="{ name : 'home'}">W</a></1li> 
<li><a v-link="{ name : 'list'}"> 列 表 页 </a></1i> 
</ul> 
</template> 


<script type="text/ecmascript-6"> 
export default { 
data () { 


Jo 
methods : { 


} 
} 


</script> 


display: flex; 

ul li { 
list-style: none; 
flex:1; 


</style> 





template 标 签 中 的 即 为 该 组 件 的 DOM 结 构 ， 默 
认 采 用 HTML 形 式 ， 每 个 .vue 文 件 中 最 多 只 能 包含 
一 个 template 标 签 。 由 于 template 采 用 的 模板 引擎 是 
consolidate.js(https://github.com/tj/consolidate.js) , 32 
持 大 部 分 的 模板 语法 ， 我 们 可 以 通过 配置 template 
的 lang 属 性 ， 使 用 不 同 的 模板 语法 ， 例 如 : 





<template lang="jade"> 
ul. 
li 


a(v-link="{ name : 'home' }") 首页 
li 
a(v-link="{ name : 'list' }") 列表 页 
</template> 


Ooo O 


script 标 签 中 即 为 该 组 件 的 js 代码 ， 且 同 
template 一 样 ， 一 个 .vue 文 件 中 最 多 只 能 包含 一 个 
script 标 位， 而 且 最 终 必 须 输出 〈export) 一 个 符合 
Vue.extend(0) 参 数 规范 的 对 象 ， 用 于 建立 Vue 组 件 构 
Eao PaE H t export default 输 出 的 对 象 。 


style 标 签 即 为 该 组 件 的 CSS 代 码 ， 同 个 vue 文 件 
中 可 以 包含 多 个 style 标 签 。 除 了 直接 使 用 CSS 写 法 
外 ， 还 可 以 通过 配置 loader， 支 持 sass、less 等 样式 
写法 。 另 外 还 有 一 个 scoped 属 性 ， 添 加 之 后 ，vue- 
loader 会 把 当前 同 .vue 文 件 template 中 的 DOM 都 添加 
一 个 _v.……. 的 属性 ， 并 把 style 中 的 样式 也 加 上 对 应 
的 属性 选择 占 ， 使 得 这 部 分 样式 仪 在 当前 vue 的 
DOM 中 生效 。 这 个 方式 使 得 组 件 间 的 样式 不 会 互 
相 神 突 ， 也 不 需要 过 长 的 命名 来 维护 。 例 如 








<style scoped> 
ul { 
display: flex; 


} 
ul li { 
list-style: none; 
flex:1; 
} 
</style> 
<template> 


<ul> 
<li><a v-link="{ name 
<li><a v-link="{ name 
</ul> 
</template> 


"home'}"> #4 W</a></1li> 
‘List '}"> ZW </a></1i> 





我 们 在 浏 


¥ <style type="text/css 
ul[_v-5584bc67] { 
display: -webkit—box; 
display: -ms-flexbox; 
display: flex; 
} 
ul Lif_v-5584bc67] { 
list-style: none; 
-webkit-box-flex:1; 
-ms-flex:1; 
flex:1; 


1 


J 
/style 


HTML 结 构 为 : 


v<ul 


_V-5584bc67 
veli _v-5584bc67 


a v-Link="{ name : ‘home'}" _v-5584bc67 
Eti 
veli _v-5584bc67 
a v-link="{ name : 'list'}” _v-5584bc67>5 


Fit 
ful 


| A a P fa PAI EE AE SUB A: 


Shi</a 


I 表册 </a 


8.2 ”目录 结构 


Vue.js 有 一 识 官 方 的 脚手架 生成 工具 vue-cli， 
可 以 通过 npm install -g vue-dli 进 行 全 局 安装 。 之 后 
mit HY LEH fit > vue init <template-name> <project- 


name> 进 行 脚手架 的 安装 。 
vue-clj 总 共 提 供 了 5 种 脚手架 ( 即 可 使 用 的 


<template-name>)， 分 别 如 下 。 





webpack: 基于 webpack 和 vue-loader 的 目录 结 
W, MASA. ABRA, Wi Accss HH A. 


webpack-simple: 基于 webpack 和 vue-loader 的 
目录 结构 。 


browerify: 基于 Browerfiy 和 vueify〈 作 用 于 
Vvue-loader 关 似 ) 的 结构 ， 文 持 热 部 着 、 代 码 检 查 及 
单元 测试 。 





browerify-simple: 基于 Browerfiy 和 vueify 的 结 
构 。 


simple: 单个 引入 Vue.js 的 idex.html 页 面 。 








这 里 我 们 主要 会 使 用 webpack 作 为 常用 脚 手 
架 ， 可 以 运行 vue init webpack my-project 来 生成 项 
目 。 如 图 8-2 所 示 。 


Llocalhost:Desktop GavinCLY$ vue init webpack my-project 


? Target directory exists. Continue? No 


localhost:Desktop GavinCLY$ vue init webpack my-project 


? Project name my-project 

? Project description A Vue.js project 

? Author Administrator <admin@Local .host> 
? Use ESLint to lint your code? Yes 

? Pick an ESLint preset Standard 

? Setup unit tests with Karma + Mocha? Yes 
? Setup e2e tests with Nightwatch? Yes 


vue-cli - Generated "my-project". 
To get started: 

cd my-project 

npm install 


npm run dev 


Documentation can be found at https://vuejs-tempLates.github.io/webpack 





localhost:Desktop GavinCLY$ 
网 8-2 
生成 的 目录 结构 如 图 8-3 所 示 。 





FOLDERS 
y & my-project 
> © build 
» © config 
y B src 
(J assets 
» C components 
App.vue 
[A main.js 
» (5 static 
y B test 
> O e2e 
> © unit 
.babelrc 
.editorconfig 
.eslintignore 
.eslintrc.js 


DOOD 


.gitignore 
index.html 
[A package.json 
README.md 


图 8-3 
build: 用 于 存放 webpack 相 关 配 置 和 脚本 。 


config: 主要 存放 配置 文件 ， 用 于 区 分 开发 环 
境 、 测 试 环 境 、 线 上 环境 的 不 同 。 


src: 项 目 源码 及 需要 引用 的 资源 文件 。 

static: 不 需要 webpack 处 理 的 静态 资源 。 

test: 用 于 存放 测试 文件 。 

从 package.json 中 ， 我 们 可 以 看 到 项 目 文 持 的 命 








"scripts": { 

"dev": "node build/dev-server.js", // 开发 时 局 动 的 ser 
ver 服 务 

"build": "node build/build.js", // 代码 编译 

"unit": "karma start test/unit/karma.conf.js --single 
-run", // 运行 单元 测试 

"e2e": "node test/e2e/runner.js", // 运行 e2e 测 试 

"test": "npm run unit && npm run e2e", // 运行 单元 测 
试 和 e2e 测 试 

"lint": "eslint --ext .js,.vue src test/unit/specs te 
st/e2e/specs" // 使 用 eslint 进 行 语 法 检查 


Pd 


正常 开发 时 ， 束 会 运行 命令 npm run dev, JAZ 
一 个 小 型 的 express 服 务 。 在 这 个 express 服 务 中 ， 会 
使 用 webpack-dev-middleware 和 webpack-hot- 
middleware 这 两 个 中 间 件 ， 来 进行 项 目的 热 部 署 ， 
即 每 次 修改 src 中 的 文件 后 ， 不 需要 再 按 浏 览 右 的 刷 
新 来 更 新 代码 ， 局 动 的 Server 服 务 会 目 动 监 听 文 件 
的 变化 并 编译 ， 通 知 浏 览 器 目 动 刷 新 。 





8.3 前端 开发 


src 目 录 里 面 束 是 我 们 主要 的 前 端 开发 文件 ， 由 
于 脚手架 采用 了 vue-loader， 束 可 以 把 组 件 抽象 成 一 
个 .vue 文 件 ， 并 把 所 需 的 样式 和 和 DOM 结构 都 放 在 一 
起 。 我 们 以 一 个 登录 实例 来 展示 整体 的 开发 情况 。 


目录 情况 如 下 : 














— components 
| | 一 Main.vue 
-一 Login.vue 


— main.js 
— index.html 





index.html 代 码 如 下 : 





<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>my-project</title> 
</head> 
<body> 
<div id="app"> 


<router-view></router-view> 
</div> 
</body> 
</html> 





./src/main.js 代 人 码 如 下 : 





import Vue from ‘vue' 


// Vue.js 插 件 

// 这 里 使 用 了 vue-router， 先 运行 hpm install vue-router -sa 
ve 进行 安装 

import VueRouter from ‘vue-router' 


// 组 件 
import Main from './components/Main.vue' 
import Login from './components/Login.vue' 


Vue.use(VueRouter ) 


var router = new VueRouter({ 


}) 


router.map({ 
Pts q 
name: ‘main’, 
component: Main 
Jo 
'/login': { 
name: 'login', 


component: Login 
} 
}) 
var App = Vue.extend({ 


}) 
router.start(App, '#app') 


components/Login.vue 
<template> 
<div class="login"> 
<div class="input-wrap"> 
<input type="text" v-model="name" /> 
<span v-if="error.name" class="err-msg">{{error. 
name}}</span> 
</div> 
<div class="input-wrap"> 
<input type="password" v-model="pwd" /> 
<span v-if="error.pwd" class="err-msg">{{error.p 
wd}}</span> 
</div> 
<div class="input-wrap"> 
<button @click="login" >#é22</button> 
</div> 
</div> 
</template> 


<script> 
export default { 
data () { 
return { 


name: $ 

pwd : "', 

error : { 
name : ? 


pwd : '' 
} 


J 


methods : { 
check(name, pwd) { 


J 


if(!name) { 
this.error.name = “请 输入 姓名 " ; 
return false; 
} 
if(!pwd) { 
this.error.name = ' 请 输入 密码 '， 
return false; 


} 


return true; 


login() { 


const { name, pwd, $router} = this; 
if(!this.check(name, pwd)) return; 


if(name == 'admin' && pwd == 123) { 
$router.go({ name : ‘'main' }); 
} else { 
alert(' 用 户 名 密码 错误 ' ) ; 
} 
} 
} 
} 
</script> 


<style scoped lang="scss"> 
.login { 
width: 300px; margin:10% auto; 


} 


</style> 


Aa 


需要 注意 的 是 在 style 标 签 中 使 用 了 
lang=“scss” 这 样 的 属性 ， 也 就 说 此 处 的 写法 是 需要 
符合 scss 规 范 的 ， 而 且 我 们 需要 在 webpack 的 配置 中 
加 上 sass 的 loader 用 来 编译 这 段 样式 。vue-dli 默 认 的 
配置 中 并 没有 安装 sass-loader, 所 以 需要 目 己 手动 安 


装 一 下 npm install sass-loader-dev-save。 


在 build/webpack.base.conf.js 中 ，vue-loader 配 置 
了 所 有 的 CSS 的 loader 处 理 占 ， 如 图 8-4 所 示 。 


module: { 
},| 


vue: { 


loaders: utils.cssLoac 


} 








引用 的 是 build/utils 中 的 方法 ， 如 图 8-5 所 示 。 


exports.cssLoaders = function (options) { 
options = options {} 


function generateLoaders (loaders) { 
var sourceLoader = loaders.map(function (loader) { 
var extraParamChar 
(/\?/.test(loader)) { 

loader = loader.replace(/\?/, '-loader?') 
extraParamChar = '&' 

} { 
loader = loader + '-loader' 
extraParamChar Dy pe 

} 


loader + (options.sourceMap ? extraParamChar + ‘sourceMap' ay 


}).join('!') 


(options.extract) { 
ExtractTextPlugin.extract('vue-style-Loader', sourceLoader) 
{ 


['vue-style-loader', sourceLoader].join('!') 


{ 
css: generateLoaders(['css']), 
postcss: generateLoaders(['css']), 
less: generateLoaders(['css', ‘less']), 
sass: generateLoaders(['css', 'sass?indentedSyntax']), 
scss: generateLoaders(['css', 'sass']), 
stylus: generateLoaders(['css', 'stylus']), 
styl: generateLoaders(['css', ‘'stylus']) 





图 8-5 


要 安装 不 同 的 预 处 理 loader 即 可 ， 基 本 不 用 修改 里 
面 的 webpack 配 置 。 





./src/components/main. vue 
<template> 
<div class="main"> 
<hi>{{ msg }}</h1> 


</div> 
</template> 


<script> 
export default { 
data () { 
return { 
msg: ‘Welcome to the Vue.js' 


</script> 


<style scoped lang="scss"> 
.main { 
font-size: 14px; 
color: #58666e; 
background-color: #1c2b36; 


} 
</style> 











这 样 一 个 基本 的 登录 校 验 及 跳 转 主页 面 的 功能 


束 完 成 了 ， 实 际 的 效果 与 rl 路 从 如 下 。 
登录 页 面 如 网 8-6 所 示 。 





国 canotecowoo 
SS 


提交 


图 8-6 


错误 提示 页 面 如 图 8-7 所 示 。 








| locathost:8080/#!/login 





请 输入 姓名 


图 8-7 
输入 admin、123 成 功 跳 转 ， 如 图 8-8 所 示 。 


Egad |) locathost:8080/#!/ 


图 8-8 


8.4 后 端 联 调 


在 正常 开 用 中， 前 问 和 后 端 联 调 是 必 不 可 少 的 
一 环 。 由 于 我 们 已 经 采用 前 后 端 分 离 的 方式 进行 开 
A, MUERA ig EE AS Hh a BE J in BAR I o 
通常 可 以 直接 远程 调用 后 端的 数据 接口 (比如 开发 
环境 或 测试 环境 的 接口 ) 。 但 在 本 地 调试 时 ， 我 们 
不 能 直接 在 前 端 页 面 中 访问 其 他 jp 的 接口 ， 否 则 会 
有 跨 域 的 问题 ， 所 以 一 般 也 会 在 本 地 启动 一 个 代理 
服务 器 ， 拦 截 前 端 页 面 的 异步 请 求 ， 从 本 地 服务 端 
， 得 到 response 后 再 返回 给 前端 
页 面 。 


vue-cli 搭 建 的 webpack 脚 手 架 中 就 包含 了 一 个 
微型 的 代理 服务 器 ， 我 们 只 需要 进行 一 些 配置 ， 就 
可 以 在 本 地 调用 远程 服务 接口 ， 在 config/index.js 
中 : 




















var path = require('path' ) 


module.exports = { 


build: { 
env: require('./prod.env'), 
index: path.resolve(__dirname, '../dist/index.html' 
) ， 
assetsRoot: path.resolve(__dirname, '../dist'), 


assetsSubDirectory: ‘static’, 


assetsPublicPath: '/', 
productionSourceMap: true, 
productionGzip: false, 
productionGzipExtensions: ['js', ‘css'] 


Jo 

dev: { 
env: require('./dev.env'), 
port: 8080, 


assetsSubDirectory: 'static', 
assetsPublicPath: '/', 
proxyTable: {}, 

cssSourceMap: false 





dev 属 性 中 的 proxyTable 束 是 服务 的 代理 配置 
项 ， 使 用 方式 如 下 ; 





proxyTable : { 
'/api': { 
target: 'http://test.server.com', // 远程 服务 域名 
changeOrigin: true, 
pathRewrite: { 
'^/api': '/api' 











这 样 配置 的 作用 相当 于 在 前 并 页 面 及 了 一 个 url 
为 /api/users/1 的 寞 步 请 求 ， 代 理 服务 器 将 其 转发 到 
了 http://test.server.com/api/users/1 上 ， 然 后 返回 数 
据 ， 这 样 就 不 会 出 现 跨 域 的 问题 ， 也 实现 了 前 后 站 
分 离 和 联 调 。proxyTable 最 终 会 传递 到 ./build/dev- 
server.js 中 的 express 服 务 中 ， 通 过 http-proxy- 
middleware 中 间 件 进行 使 用 ， 详 细 的 配置 说 明 可 以 
访问 https://github.com/chimurai/http-proxy- 
middleware 了 解 。 


配置 完 代 理 服务 器 后 ， 我 们 就 可 以 使 用 vue- 
resource 来 进行 数据 请 求 了 。 通 常会 把 蛙 个 资源 的 
数据 交互 抽象 成 一 个 模块 ， 添 加 到 文件 夹 api 中 ， 供 
各 组 件 调用 。 我 们 以 auth.j$ 为 例 ， 用 于 处 理 用 户 登 
录 注 册 等 方面 的 请 求 : 








| 一 src 
| H api 
| — auth.js 





./src/api/auth.js 代 人 码 如 下 : 


const API URL = '/api/auth' ; 
export default { 


login(context, name, pwd) { 
return context. $http({ 
url : API_URL + '/login', 
method : ‘post’, 
data : { 
name, 
pwd 


} 
}); 
} 





然后 我 们 先 修 改 main.js， 加 入 vue-resource: 


import VueResource from 'vue-resource' 
Vue.use(VueResource ) 





然后 将 ./src/components/Login.vue 中 的 login 方 法 
修改 为 : 





import authSrv from './../api/auth.js'; // 引入 service 模 
块 


login() { 
const { name, pwd, $router} = this; 
if(!this.check(name, pwd)) return; 


authSrv 
.login(this, name, pwd) 
.then(rep => { 
if(!rep.code) { 


$router.go({ name : 'main' }); 
} else { 
alert( ' 用 户 名 密码 错误 ' ) ; 
} 
}) 


} 





需要 注意 的 是 ， 本 地 和 正式 上 线 的 后 端 接口 路 
径 尽 量 保 持 一 致 ， 例 如 本 地 访问 
http://localhost/api/auth/login ， 线 上 接口 的 地 址 最 好 
也 是 http://prod.api.com/api/auth/login ， 这 样 部 团 上 
线 后 不 需要 修改 /api 目 录 下 模块 的 路 人 径 弟 量 ， 奋 则 





可 能 需要 nginx 等 服务 器 软件 做 代理 服务 。 


8.5 Be ke 


项 目 本 地 开发 完成 后 ， 我 们 就 需要 将 代码 部 车 
到 线 上 服务 器 。 在 此 之 前 ， 束 需要 把 这 些 零散 的 文 
件 打包 压缩 成 一 个 css 和 js 文件 ， 以 减少 HTTP 的 请 
HAL, WER ASE RE TARE. Ah, RNAS 
用 到 版 本 管理 工具 和 目 动 化 部 署 工 具 ， 本 节 也 会 简 
单 介绍 下 gitlab 和 jenkins 这 两 个 常用 的 开源 项 目 ， 便 
TEE 目 己 公司 的 代码 管理 工具 和 目 动 化 部 普 平 


m) 








8.5.1 生成 线 上 文件 


vue-cli 中 提供 了 代码 编译 、 人 合并、 压缩 的 脚本 
build/build.js， 运 行 npm run build 后 我 们 得 到 的 文 
件 ， 如 图 8-9 所 示 。 


dist 
= static 
css 
app.f696f80ae2 bede3c453746ddccec4cl17.css 
(5 app.f696f80ae2bede3c453746ddccec4c17.css.map 
B js 
app.283 10fe6bc28ebc232bc.js 
[5 app.28310fe6bc28ebc232bc.js.map 
manifest.fe2498bc18e84037bc84.js 
[A manifest.fe2498bc18e84037bc84.js.map 
vendor.8b52980f 1f6c6c6acfe4.js 
[5 vendor.8b52980f1f6c6c6acfe4.js.map 
index.html 


图 8-9 


build.js 将 组 件 中 的 css 编 译 合并 成 一 个 app. 
[hashj.css 的 文件 ，js 则 在 合并 后 又 拆 解 成 了 3 个 文 
件 ，app.[hash].js$ 包 含 了 所 有 components 中 的 js 代 
但 ，vendor.[hash].js 包 含 了 所 有 引用 的 node_modules 
中 的 代码 ， 而 mainfest.[hash].js 则 包含 了 webpack 运 
行 环境 及 模块 化 所 需 的 js 代码 。 这 样 拆 分 的 好 处 
是 ， 每 块 组 件 修改 重新 编译 后 不 影响 其 他 未 修改 的 
js 文件 的 hash 值 ， 这 样 能 够 最 大 限度 地 使 用 缓存， 
减少 HTTP 的 请 求 数 。 


8.5.2 nginx 


Nginx 是 一 球 轻 量 级 、 高 性 能 的 HTTP 和 反问 代 
理 服务 器 。 如 果实 际 情况 中 前 端的 静态 资源 和 后 端 
服务 需要 分 别 部 署 在 不 同 ip 的 服务 器 上 时 ， 我 们 就 
可 以 使 用 nginx 配 置 来 避免 跨 域 的 问题 。 


下 面 以 centos 为 例 ， 人 简单 说 明 nginx 的 安装 和 配 
置 。 





Nginx 依 赖 于 pcre，openssl，zlib 这 几 个 软件 ， 
首先 通过 yum 进 行 安装 : 


yum install -y pcre pcre-devel 
yum install -y zlib zlib-devel 
yum install -y openssl openssl-devel 





然后 从 nginx 官 网 下 载 你 所 需要 版 本 的 压缩 


(= 


wget http://nginx.org/download/nginx-1.8.0.tar.gz 





RR IAREA A ae, FAITE m EMR. 


cd nginx-1.8.0 
./configure 
make && make install 








这 样 就 安装 在 了 默认 路 径 /uswlocalnginx 下 ， 
我 们 需要 修改 的 配置 文件 为 conf/vhost/ 中 的 * conf 3 
件 ， 通 过 配置 rewrite 方 式 将 发 送 到 前 端 服务 左上 的 
数据 请 求 转发 到 后 端 服 务 器 中 。 


例如 ， 将 打包 好 的 index.html 放 置 
到 www.domain.com 下 ， 而 后 端 服务 则 在 域名 
data.domain.com 下 ， 这 时 就 需要 进行 如 下 配置 : 





server { 
listen 80; 
server name www.domain.com; 
index index.html index.htm index.php; 
root /www/; // index.htm1 放 置 的 服务 器 目录 


location *~ /api/ { // [匹配 所 有 以 www.domain.com/api/ 开 
头 的 请 求 


proxy_pass http://data.domain.com; // 实际 请 求 到 的 地 
址 为 http://data.domain.com/api/ 
} 
} 





8.5.3 gitlab 


GitLab 是 基于 Ruby on Rails 的 一 个 开源 版 本 管 
理 系 统 ， 实 现 一 个 自 托 管 的 Git 项 目 仓 库 。 我 们 可 以 
在 自己 的 服务 器 上 措 建 一 套 Citab 系 统 ， 便 于 公司 
的 代码 管理 


Gitlab 可 以 通过 官 
网 https://about.gitlab.com/downloads/ ， 选 择 所 需 的 
服务 器 版 本 ， 然 后 根据 提供 的 安 闭 步骤 进行 安装 ， 
如 图 8-10 所 示 。 


P ms /avout oab. com downoads wis £€ ea ¢ 9, 
by GitLab Download Features Pricing Community Explore Blog Q [ 


Download GitLab Community Edition (CE) 


Install a GitLab CE Omnibus package on 


Select Operating System 





图 8-10 


安 闭 好 后 可 以 通过 提供 的 管理 员 账 所 进行 


录 ，Gitlab 的 使 用 方式 和 Github 类 似 ， 我 们 可 以 为 项 
目的 前 端 项 目 工程 新 建 一 个 git， 如 图 8-11 所 示 。 


New project 





一 般 来 说 ，git 项 目 会 分 成 master、develop、 
feature、hotfix 这 几 种 分 文 类 型 ; 


mater 为 主 分 支 ， 主 要 用 于 发 布 ， 代 码 永远 处 
于 稳定 可 产品 化 发 布 的 状态 。 


develop 为 开发 分 支 ， 主 要 记录 开发 状态 下 相对 
稳定 的 版 本 。 


feature 为 功能 分 支 ， 从 develop 上 拉 取 代码 ， 开 
发 完成 后 再 合并 到 develop 分 文 上 。 经 名 用 于 一 个 大 
版 本 develop 拆 分 成 几 个 feature 的 场景 ， 便 于 多 个 开 
发 人 员 在 同一 版 本 迭代 中 开发 各 目 不 同 的 功能 点 ， 
避免 代码 冲突 ， 在 开发 完成 后 再 合并 到 develop 分 文 


中 进行 测试 。 


hotfix 为 紧急 线 上 修复 分 文 ， 需 要 从 master 上 拉 
取 分 支 进行 bag 修复， 修复 完成 后 分 别 并 入 master 和 
develop 分 文 。 





8.5.4 jenkins 


Jenkins 是 一 个 开源 的 持续 集成 系统 ， 方 便 开 发 
者 利用 图 形 界 面 进 行 项 目 部 署 发 布 等 固定 操作 ， 通 
第 也 会 和 Gitlab 配 合 起 来 ， 在 git push 完 成 后 触发 设 
定好 的 操作 ， 例 如 将 代码 部 署 到 某 个 开发 环 十 中 。 


Jenkins 本 喘 是 用 Java 开 发 的 ， 需 要 jdk 的 环境 ， 
Æ http://mirrors.jenkins-ci.org/war/latest/jenkins.war 
TRE wart, aR ESET Al Ee A oe 
TEMS, JETT. Bei ar 4T java -jar 
jenkins.war 即 可 ， 如 果 要 以 后 台 进 程 的 方式 局 动 ， 
改 成 nohup java -jar jenkins.war & 由 可 ， 局 动 过 程 
中 ， 它 会 将 war 包 解压 到 ~/.jenkins 目 录 下 ， 并 生成 
一 些 目 录 及 配置 文件 ， 如 图 8-12 所 示 。 
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Jenkins 中 以 ‘Job’ 作 为 任务 单位 ， 我 们 可 以 通过 
新 建 Job 进 行 配置 ， 如 图 8-13 所 示 。 


General 


图 8-13 


General: 主要 包含 了 Job 的 基本 信息 配置 ， 例 
如 项 目 名 称 、 描 述 等 属性 ， 如 图 8-14 所 示 。 
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图 8-14 


源码 管理 :可 以 和 git 配 合 使 用 ， 主 要 用 于 
jenkins 拉 取 源 人 码 ， 如 图 8-15 所 示 。 


源码 管理 


None 


© Git 
Rep RA € 
Rep URL Eco © 
Credentials es : o- Adé 
Add Repositor y 
Branct buil ES 
Branch Sp blank f ) en @ 
Add Branch 
(自动 ) 
Additional Behaviours Add v 


构建 触及 器 : 对 于 在 开发 环境 经 各 需要 发 布 的 
项 目 来 说 ， 可 以 使 用 构建 触发 器 ， 在 git push 后 自动 
部 署 到 开发 服务 器 上 ， 如 图 8-16 所 示 。 


构建 触发 器 





对 构建 (例如 ,使 用 那 本 ) 
Build after other projects are built 
Build periodically 


Build when a change is pushed to GitHub 


Build when a change is pushed to GitLab. GitLab Cl Service URL: http:// QD boss-dev-admin-plan-api 


Build on Merge Request Events 
Build on Push Events 
Rebuild open Merge Requests Never 
Enable [ci-skip] 
Set build description to build cause (eg. Merge request or Git Push ) a 
Add note with build status on merge requests 
Vote added to note with build status on merge requests 


Accept merge request on success 


© Allow all branches to trigger this job 





Filter branches by name 


Filter branches by regex @ 


图 8-16 


ap 


在 GitLab 中 配置 Jenkins 中 提供 的 GitLab CI 
Service URL， 即 可 在 分 文 push 的 时 候 束 执行 该 
Job， 如 图 8-17 所 示 。 





W GitLab COE EEEE a 


GitLab CI 
Continuous integration server from GitLab 


+ to services 


Active 
Trigger Push events 
This uri will be triggered by a push to the repository 
Tag push events 
This url will be triggered when a new tag is pushed to the repository 
Token 
Project url 





图 8-17 


构建 环境 : 对 jenkins 所 在 的 服务 右上 的 环境 做 
相应 的 配置 ， 如 图 8-18 所 示 。 





构建 环境 

|] Delete workspace before build starts 
Send files or execute commands over SSH before the build starts @ 
Send files or execute commands over SSH after the build runs © 


Abort the build if it's stuck 

Add timestamps to the Console Output 

Execute shell script on remote host using ssh ©) 
Provide Node & npm bin/ folder to PATH 

SSH Agent 


Use secret text(s) or file(s) © 


图 8-18 


构建 : 执行 shell 脚 本 ， 例 如 进行 npm run build 
的 编译 行为 ， 将 源码 编译 成 最 终 可 执行 的 文件 ， 并 


进行 压缩 合并 及 发 布 到 线 上 服务 堪 。 


构建 后 操作 ， 整 个 任务 部 署 完成 后 可 进行 的 操 
作 ， 在 这 里 可 以 配置 邮件 通知 等 行为 。 


小 结 





本 章 主 要 介绍 了 Vue.js 在 实际 项 目 中 的 目录 结 

构 及 应 用 ， 正 式 上 线 所 需 的 编译 、 人 合并、 压缩 等 步 
又 ， 本 地 开 及 时 与 后 端的 联 调 以 及 开发 完成 后 上 自动 
化 部 车 和 服务 右 配 置 等 。 这 些 步 又 中 所 涉及 的 
webpack、nginx、gitlab、jenkins 等 工具 的 配备 ， 虽 
然 不 是 前 端 必须 所 擎 握 的 技能 ， 但 对 于 设计 整体 的 
六 端 解决 方案 来 说 却 是 必 不 可 少 的 环节 。 前 端 开 友 
者 也 会 逐渐 从 最 初 的 页 面 编写 、js 特 效 等 方面 成 长 
为 整体 解决 方案 的 提供 者 。 














PIE ”状态 管理 : Vuex 


在 一 些 大 型 应 用 中 ， 有 时 我 们 会 遇 到 单 页 面 中 
包含 着 大 量 的 组 件 及 复杂 的 数据 结构 ， 而 且 可 能 
组 件 还 会 互相 影响 各 目的 状态 ， 在 这 种 情况 下 组 件 
树 中 的 事件 流 会 很 快 变 得 非常 复杂 ， 也 使 调试 变 得 
寞 第 困难。 为 了 解决 这 种 情况 ， 我 们 往往 会 引入 状 
态 管理 这 种 设计 模式 ， 来 降低 这 种 情况 下 事件 的 复 
杂 程 度 并 且 使 调试 变 得 可 以 妃 踪 。 而 Vuex 就 是 一 个 
专门 给 为 Vue.js 设 计 的 状态 管理 架构 。 本 章 主 要 介 
绍 Vuex 的 基本 用 法 和 一 些 使 用 场景 。 





























9.1 概述 


Vuex 是 状态 官 理 模式 的 一 种 实现 库 ， 主 要 以 插 
件 的 形式 和 Vue.js 进 行 配 合 使 用 ， 能 够 使 我 们 在 
Vue.js 中 管理 复杂 的 组 件 事 件 流 。 


通常 情况 下 ， 每 个 组 件 都 会 拥有 自己 的 状态 ， 
也 可 以 理解 成 自身 实例 中 的 data 对 象 。 用 户 在 操作 
的 过 程 中 ， 会 通过 一 些 交 互 行 为 ， 例 如 点 击 、 输 
入 、 拖 动 等 修改 组 件 的 状态 ， 而 此 时 往往 需要 将 用 
户 引起 的 状态 变化 通知 到 其 他 相关 组 件 ， 让 他 们 也 
进行 对 应 的 修改 。 由 于 Vue.js 本 身 的 事件 流 是 依赖 
于 DOM 结 构 的 ， 组 件 修 改 状 态 后 需要 经 过 一 系列 
冒 泡 才 能 达到 顶部 的 组 件 ， 而 且 如 果 需 要 修改 兄弟 
组 件 的 状态 还 需要 共同 的 父 组 件 再 进行 一 次 广播 。 
这 种 方式 无 疑 是 低 效 而 且 不 易 维 护 的 ， 我 们 也 很 难 
去 追踪 事件 流 的 走 问 。 


Vuex 则 提供 了 一 个 集中 式 的 事件 流通 道 ， 类 似 
于 第 6 章 中 提 到 的 在 Vue.js 2.0 中 提供 的 var bus = new 
Vue0， 统 一 管理 组 件 的 事件 流 。 有 具体 的 流程 如 图 9- 
LAAN o 























变更 
Mutation 





9.2 人 简单 实例 


本 节 将 借用 一 个 简单 的 实例 来 讲述 Vuex 的 基础 
用 法 ， 并 对 其 中 的 核心 概念 Store (AE) 、 
State (CIRAS) ~ Mutations (变更 ) 、Actions 〈 动 
作 ) 做 进一步 的 说 明 。 


在 本 例 中 ， 我 们 会 实现 一 个 列表 的 管理 机 制 ， 
主要 包括 列表 元 素 的 增加 和 删除 。 本 市 代码 会 采用 
ES6 的 语法 进行 说 明 。 


9.2.1 所 需 组 件 


首先 建立 一 个 根 组 件 ， 路 径 为 
components/App.vue。 该 组 件 包含 两 个 子 组 件 ， 
Side 组 件 用 于 控制 列表 元 素 的 增加 和 删除 ，Content 
组 件 则 用 于 展示 列表 元 素 的 内 容 。 











<template> 
<div id="app"> 
<Side></side> 
<content></content> 
</div> 
</template> 


<script> 
import Side from './Side.vue' 


import Content from './Content.vue' 
export default { 
components : { 
Side, 
Content 
} 


} 


</script> 





创建 Side 子 组 件 ，components/Side.vue。 


<template> 
<ul class="side list-unstyled"> 
<1i> 增 加 </1i> 
<1i> 删 除 </1i> 
</ul> 
</template> 





创建 Content 子 组 件 ，components/Content.vue。 





<template> 
<div class="content"> 
<div class="item" v-for="item in items"> 
{{ item.content }} 
</div> 
</div> 
</template> 


ER 


9.2.2 ”创建 并 注入 store 

传统 方式 下 ， 如 果 需 要 通过 Side 组 件 去 添加 
Content 组 件 中 的 item， 只 能 依赖 于 根 组 件 App 来 进 
行事 件 的 监听 和 广播 ， 这 样 既 增加 了 耘 合 度 ， 也 使 
得 Side 组 件 和 Content 组 件 无 法 独立 复 用 。 

而 在 Vuex 中 ， 我 们 首先 会 增加 Store 这 个 概 
念 ， 用 于 存储 整个 应 用 所 需 的 信息 ， 本 例 中 将 存储 
元 素 的 列表 。 


首先 ， 我 们 可 以 用 npm 先 安装 Vuex。 


npm install --save vuex 


建立 一 个 新 文件 vuex/store.js， 代 码 如 下 : 














import Vue from ‘vue' 
import Vuex from ‘vuex' 


Vue.use(Vuex) 





// 创建 一 个 对 象 来 保存 应 用 启动 时 的 初始 状态 
const state = { 

items: [], // items 为 元 素 列 表 ， 

name : " // 应 用 名 称 
} 


// 用 于 更 改 状 态 的 mutation 函 数 


const mutations = { 


: ai 


export default new Vuex.Store({ 
state, 
mutations 


}) 





创建 好 store 后 ， 需 要 将 其 注入 到 我 们 的 应 用 
中 ， 新 建文 件 app.js， 引 入 Vue,Vuex 及 根 组 件 
App.vue。 





import Vue from ‘vue' 
import store from './vuex/store' 
import App from './components/App.vue' 


new Vue({ 
store, 
el: 'body', 
components: { App } 
}) 


Ooo O 


9.2.3 创建 action 及 组 件 调用 方式 


action 能 够 通过 分 发 (dispatch) ， 调 用 对 应 的 
mutation 函数 ， 来 触 用 对 store 的 更 新 。 


我 们 在 相同 目录 下 建立 vuex/actions.js。 


export const addItem = ({ dispatch, store }, item) => { 
dispatch('ADD_ITEM', item); 


} 


export const deleteItem = ({ dispatch, store}) => { 


dispatch('DELETE_ITEM'); 





action PA 2th, By DAT EA Teg I A) Js ita BRA A 
据 ， 或 读 取 store 中 其 他 的 相关 数据 后 再 进行 分 发 。 
例如 : 








export const getDataFromServer = ({ dispatch, store}) = 
> { 
// 这 里 只 是 进行 一 个 说 明 ， 你 需要 目 己 引入 所 需 的 异步 请 求 方法 
$.ajax({ 
url : ‘/api/data', 


success : function(data) { 
diapatch('FETCH_DATA', data); 
} 
}) 
} 








在 Vuex 中 ， 组 件 不 会 直接 修改 store 对 象 或 者 日 
身 的 状态 ， 都 是 通过 action 的 方法 来 进行 分 发 。 下 
面 束 来 修改 component/Side.vue 文 件 ， 使 之 能 调用 
action 的 方法 。 





// 修改 template， 为 增加 、 删 除 两 个 按键 添加 事件 
<ul class="side list-unstyled"> 
<li @click="addItem({ content : Math.random()})"> 增 加 
</li> 
<li @click="deleteItem()" > 删除 </1iy> 
</ul> 
<script> 
import { addItem } from '../vuex/actions' 


export default { 
data() { 


vuex: { 
actions: { 
addItem， 
deleteItem 


} 
} 


</script> 


由 于 之 前 已 经 注入 了 store， 所 以 在 子 组 件 中 ， 
我 们 多 了 一 个 新 的 选项 vuex。 它 可 以 包含 一 个 
actions 属 性 ， 并 将 actions.js 中 定义 的 方法 赋值 进 
去 ， 同 时 可 以 用 于 事件 绑 定 。 





9.2.4 创建 mutation 


action 分 发 后 就 由 mnutation 来 对 store 进 行 更 新 。 
需要 修改 之 前 的 vuex/store.js 文 件 ， 补 全 在 
vuex/actions.js 中 对 应 的 两 种 行为 。 


const mutations = { 
ADD_ITEM (state, item) { 
state.items.push(item) ; 


Jo 


DELETE_ITEM (state) { 


state.items.pop(); 





对 比 actions.js 中 的 方法 和 mutations， 可 以 看 出 
action 在 调动 dispatch 的 时 候 ， 需 要 准确 地 传 入 action 
的 名 称 ， 并 且 需 要 和 mutations 对 象 中 的 属性 保持 一 
致 。 由 于 动作 名 称 往往 为 音量 ， 所 以 我 们 习惯 用 大 
写 的 形式 来 命名 。 在 大 型 项 目 中 ， 也 会 单独 把 动作 
名 称 集合 抽 和 象 成 一 个 模块 ， 单 独 管 理 ， 例 如 抽象 成 


vuex/mutation-type.js o 


export default { 
ADD_ITEM : 'ADD_ITEM', 
DELETE_ITEM : 'DELETE_ITEM' 





vuex/actions.js 即 可 修改 为 : 


import { ADD_ITEM } from './mutation-type.js' 


export const addItem = ({ dispatch, store }, item) => { 
dispatch(ADD_ITEM, item); 


} 





vuex/store.js 中 的 mutations 可 修改 为 : 


import { ADD ITEM } from './mutation-type.js' 


const mutations = { 





9.2.5 组 件 获 取 state 


组 件 中 的 vuex 选 项 除了 actions 属 性 外 ， 还 有 一 
个 getters 属 性 ， 里 面 可 以 定义 函数 ， 接 有 党 的 参数 即 
为 vuex/store.js 中 定义 的 state 对 象 。 


修改 components/Content.vue 如 下 : 


export default { 
vuex: { 
getters: { 
// 这 里 采用 的 Es6 的 写法 ， 你 可 以 替换 成 
// items : function(state) { return state.items } 
items: state => state.items 





这 样 我 们 在 这 个 组 件 实例 中 束 获 得 了 state 中 的 
items 数 组 ， 在 teamplate 中 区 可 以 直接 使 用 <li v- 
for=“item in items”></li>3e iki J ACHE -o 


除了 在 组 件 中 直接 声明 getters 函 数 外 ， 也 可 以 
将 其 抽象 成 一 个 模块 。 例 如 ， 新 建 一 个 


vuex/getters.]s: 








export function getItems(state) { 
return state.items; 


} 





components/Content.vue 即 可 修改 成 : 


import { getItems } from '../vuex/getters'; 
export default { 
vuex: { 
getters: { 
items: getItems 








getters 的 使 用 并 不 是 强制 规定 ， 只 是 一 种 最 佳 





实践 。 特 别 是 对 于 大 型 应 用 来 说 ， 很 多 组 件 可 以 共 
用 getters 方 法 ， 这 样 state 中 的 值 如 果 发 生 了 变化 ， 
也 只 需要 修改 一 个 getter 方 法 即 可 ， 而 不 用 修改 所 涉 
及 的 所 有 组 件 。 


小 结 


以 上 束 是 vuex 所 涉及 的 所 有 对 和 象 及 使 用 方法 ， 
最 终结 果 为 : 


0.6732773172110129 
0.5368967656957893 


0.7304434973765515 





单 击 “ 增 加 ” 即 可 新 增 一 行 随机 数 ， 单 击 “ 删 
除 ? 则 去 除数 组 最 后 一 个 随机 数 。 我 们 可 以 从 用 户 
使 用 的 角度 来 总 结 一 下 整体 的 流程 。 


1) 操作 组 件 : 单 击 组 件 按钮 ， 调 用 组 件 中 获 
取 的 action 函 数 。 


2) action dispatch: action 函数 不 会 直接 对 store 
数据 进行 修改 ， 而 是 通过 dispatch 的 方式 通知 到 对 


应 的 mutation 。 


3) mutation: mutation 函数 则 包含 了 对 store 数 
据 的 具体 修改 内 容 。 


4) store/state: store 是 包含 当前 state 的 单一 对 


象 ， 数据 更 新 后 ， 目 动 通知 到 getter 疯 数 。 


5) getter: getter 国 数 从 store 获 取 组 件 所 需 的 数 
据 。 


6) 组 件 展示 : 组 件 中 使 用 getter 函 数 ， 获 取 新 
的 数据 ， 进 行 展 示 。 


上 述 例子 只 是 为 了 展示 vuex 的 基础 用 法 ， 实 际 
开发 中 我 们 不 会 为 了 维护 一 个 数组 而 采取 这 么 多 步 
又 。 在 第 7.4 节 中 ， 我 们 会 在 这 个 例子 的 基础 上 进行 
修改 ， 开 发 一 个 简易 的 HIML5 页 面 编辑 器 。 





9.3 ”严格 模式 


Vuex.store 具 有 严格 模式 ， 即 当 Vuex State 在 
mutation 函 数 之 外 的 情况 下 被 修改 时 ， 即 会 抛 出 错 
误 。 我 们 可 以 在 创建 实例 时 传 入 strict:true 参 数 ， 即 
可 开启 严格 模式 : 


const store = new Vuex.Store({ 
[Lae 


strict : true 


}) 





需要 注意 的 是 ， 不 要 在 生产 环境 中 开局 严格 模 
式 。 严 格 模式 会 对 state 树 进行 一 个 深入 观察 ， 会 造 
成 额外 的 性 能 损耗 ， 所 以 可 以 将 上 述 例子 修改 为 : 
const store = new Vuex.Store({ 


pics 


strict : process.env.NODE_ENV !== 'production' 


}) 





9.4 中间 件 


Vuex store 接 受 middlewars 选 项 来 加 载 中 间 件 ， 
例如 : 





const store = new Vuex.Store({ 


Vl ss 


middlewares : [myMiddleware | 


}) 





myMiddleware 是 一 个 对 象 ， 可 以 包含 设 定好 的 
钩子 函数 ， 例 如 : 





const myMiddleware = { 
onInit(state) { 
// 在 初始 化 的 时 候 被 调用 ， 可 以 记录 初始 state 
console.log(state) ; 
Jo 
onMutation(mutation, state) { 
// 每 个 mutation 之 后 都 会 调用 
// 每 个 mutation 参 数 格式 为 { type, payload} 
console.log(mutation, state); 
} 
} 








我 们 可 以 在 第 9.2 节 的 例子 中 加 一 个 中 间 件 ， 并 
进行 增加 和 删除 操作 ， 观 察 输出 的 结果 为 : 


payload 即 为 mutations 定 义 的 
ADD ITEM (state, item) 中 除了 state 外 的 后 面 所 
有 参数 的 数组 。 


9.4.1 快照 
可 以 在 中 间 件 内 设置 获取 state 的 快照 ， 用 来 比 


较 mutation 执 行 前 后 的 state。 只 需 在 设置 中 间 件 对 
象 的 时 候 新 增 snapshot 选 项 及 onMutation 钧 子 函 数 。 


const mySnap = { 
Snapshot: true, 
onMutation (mutation, nextState, prevState) 
// nextSstate 和 prevState 分 别 为 nutation 触 发 前 和 触发 后 对 
Estate REIRE I 


} 
} 





同 严 格 模 式 一 样 ， 快 照 模式 也 建议 只 在 开 友 模 
式 下 使 用 ， 处 理 方式 与 严格 模式 类 似 : 


const store = new Vuex.store({ 

Lion 

middlewares : process.env.NODE_ENV !== 'production' 
? [mySnap] : [] 
}) 





9.4.2 logger 


为 了 方便 调试 和 观察 数据 变化 ，Vuex 自 带 了 一 
个 logger 中 间 件 ， 使 用 方法 如 下 : 


// 使 用 的 vuex 版 本 是 9.82 


import createLogger from ‘vuex/logger' ; 


const store = new Vuex.Store({ 
middlewares : [createLogger() ] 


}) 








在 调用 action 后 ， 我 们 可 以 在 控制 台 看 到 logger 
中 间 件 输出 的 内 容 ， 记 录 了 mnutation 的 type 和 调用 时 
间 ， 以 及 state 的 变化 过 程 : 


Y mutation ADD_ITEM @ 20:32:42.432 build. js:20372 


> Object {items: Array[@]} build. js:20377 
mutation build. js:20378 


> Object {type: “ADD_ITEM", payload: Array[1]} 





next state > Object {items: Array[1]} 


> 


createLogger 有 以 下 几 个 选项 可 供 配置 。 
1) collapsed: 默认 为 tue， 用 于 是 否 目 动 展开 


输出 的 mutations。 





2) transformer: 类 型 为 函数 ， 接 受 state 为 参 
数 ， 用 于 限定 在 控制 台 输 出 的 部 分 state。 由 于 在 大 
型 应 用 中 state 通 第 会 比较 复杂 ， 如 果 都 直接 输出 到 
控制 合 会 显得 比较 杂乱 ， 上 所 以 可 以 用 transformer 进 
行 控 制 |。 


3) mutationTransformer: 类 型 为 函数 ， 接 受 
mutation 为 参数 ， 返 回 值 即 为 控制 台中 输出 的 
mutation。 默 认为 {type: °, payload: “}， 我 们 也 可 
以 通过 设 定 其 返回 值 ， 来 对 控制 台 的 输出 进行 目 定 
义 。 例 如 ， 我 们 可 以 设置 返回 值 为 return 
mutation.type， 这 样 在 控制 台中 仪 会 输出 
mutation.type 的 值 ， 而 不 输出 mutation.payload 


createLogger 使 用 选项 的 具体 示例 如 下 : 


import createLogger from 'vuex/logger' ; 

















const logger = createLogger({ 
collapsed: false, 
transformer (state) { 
return state.items 
}s 
mutationTransformer (mutation) { 
return mutation.type 
} 
}) 


const store = new Vuex.Store({ 
middlewares : [logger] 


}) 





9.5 “表单 处 理 


在 Vuex 的 模式 下 ， 组 件 中 的 表单 处 理会 稍 显 不 
同 ， 因 为 表单 “天 然 ”? 的 作用 就 是 直接 修改 组 件 内 状 
态 ， 这 和 Vuex 的 action = mutation state 的 修改 方式 
显然 并 不 人 符合。 特别 是 在 严格 模式 下 。 我 们 将 第 9.2 
节 中 的 components/content.vue 修 改 为 : 





<template> 
<div class="content"> 
<div class="item" v-for="item in items"> 
<input type="text" v-model="item.content" /> 
</div> 


</div> 
</template> 











在 用 户 输入 时 ， 束 相当 于 直接 修改 state 状 态 。 
而 由 于 这 个 修改 并 不 是 在 mutation 中 执行 的 ， 此 时 
vuex 开 会 抛 出 一 个 警告 : 


Or [Vue warn]: Error when evaluating setter “item.content": Error: [vuex] build. js:9271 
Do not mutate vuex store state outside mutation handlers. (found in component: <content>) 





> 


为 了 避免 这 种 情况 ， 也 为 了 能 够 更 好 地 跟踪 
state 状 态 ， 我 们 会 把 表单 元 素 绑 定 state 的 值 ， 并 在 





change 或 者 blur 事 件 中 监听 action 行 为 ， 不 推荐 使 用 
input， 这 样 每 次 输入 都 会 触及 action， 对 性 能 消耗 
较 大 。 例 如 : 





<input :value="item.content" @change="updateContent($in 
dex, $event.target.value)" > 

// components/content.vue 的 js 修改 为 : 

import { updateContent } from '../vuex/actions' 


export default { 
vuex: { 
getters: { 
items: state => state.items 
Jo 
actions: { 
updateContent 


} 
} 
} 
// vuex/actions .js 中 增加 updateContent 方 法 
export const updateContent = ({ dispatch }, index, valu 


e) => { 
dispatch('UPDATE_CONTENT', index, value) 
} 


// vuex/store.js 中 增加 mutations 的 UPDATE_CONTENT 属 性 : 
const mutations = { 
// ….. 
UPDATE_CONTENT(state, index, value) { 

// 需要 注意 的 是 ， 我 们 在 本 例 中 修改 的 是 items 数 组 对 象 中 co 
ntent 的 值 

// 如 果 直 接 写 成 state.items[index].content = value， 
vue 是 无 法 监听 到 数值 变化 的 

// 也 就 无 法 更 新 视图 上 的 content 值 ， 所 以 此 处 用 $set 方 式 更 
新 数据 





state.items.$set(index, { content : value }); 


} 
}; 





当然 ， 如 果 你 觉得 没有 必要 跟踪 item.content 的 
值 ， 也 可 以 不 将 此 内 容 放 入 Vuex 中 ， 完 全 当做 组 件 











的 本 地 状态 。 一 般 和 其 他 组 件 不 产生 影响 的 状态 就 
可 以 这 么 处 理 。 


此 外 ， 如 果 和 希望 使 用 状态 管理 ， 又 想 继续 使 用 
v-model， 则 可 以 通过 Vue.js 的 计算 属性 来 实现 : 











// 修改 components/content.vue 
<div class="content"> 
<input type="text" v-model="appName"> 


</div> 


import { updateContent, updateName } from '../vuex/acti 
ons' 
export default { 
vuex: { 
getters: { 
fp a 
name : state => state.name 
Jo 
actions: { 
TY isn 
updateName 


} 


Jo 
computed: { 
appName: { 
get() { 
return this.name; 
Jo 
set(val) { 
this.updateName(val); 


// 修改 vuex/actions.js 
export const updateName = ({ dispatch }, name) => { 
dispatch('UPDATE NAME', name); 


// 修改 vuex/store.js 
const mutations = { 
roe 
UPDATE_NAME(state, value) { 
state.name = value; 
} 
}; 





我 们 在 input 中 输入 内 容 的 时 候 束 进行 了 state 的 
更 新 ， 从 logger 中 可 以 看 到 : 





mutation UPDATE_NAME @ 10:16:45.793 


build.js:19089 


prev state > Object {items: Array[@], name: may build. js:198094 
mutation UPDATE_NAME build.js:19095 
next state b Object {items: Array[@], name: "1"} build. js:19096 

> Object fitems: Array[@], name: "12"} build. js:19077 

> Object {items: Array[@], name: "1"} 

mutation UPDATE_NAME @ 10:16:46.406 build. js:19689 
prev state > Object {items: Array [@], name: aq"? build. js:19094 
mutation UPDATE_NAME build.js:19095 
next state » Object {items: Array[@], name: "12"} build. 15219096 

> Object {items: Array[@], name: "123"} build. js: 19877 

> Object {items: Array[@], name: "12"} 

mutation UPDATE_NAME @ 10:16:46.781 build. js:19889 
prev state > Object {items: Array[@], name: nyt} build.js:19094 
mutation UPDATE_NAME build.js:19095 
next state b Object {items: Array[0], name: "123"} build. 13229096 

> Object {items: Array[@], name: "1234"} build. js:19077 

= Object {items: Array[@], name: "123"} 

mutation UPDATE_NAME @ 10:16:47.365 build.js:19889 
prev state > Object {items: Array[@], name: "123"} build.js:19094 
mutation UPDATE_NAME build.js:19095 
next state > Object {items: Array[@], name: "1234"} build. is:19096 


这 样 既 能 使 用 v-model， 又 对 state 状 态 进 行 了 跟 
Bas <。 如 果 觉 得 每 次 input 事件 都 调用 action 会 引起 性 
能 损耗 的 活 ， 也 可 以 使 用 v-model 本 身 的 lazy 修 饰 符 
来 降低 调用 频率 。 





9.6 ”目录 结构 


本 节 会 介绍 在 实际 项 目 中 如 何 组 织 文件 ， 以 及 
用 一 个 实例 来 展示 Vuex 试 用 的 场景 。 由 于 Vuex 的 
actions 和 mutations 本 里 都 只 是 一 些 函 数 ， 对 存放 位 
置 并 没有 严格 的 要 求 ， 所 以 按照 一 定 的 规则 来 放置 
对 熟悉 其 他 vuex 项 目 会 非常 有 帮助 。 


9.6.1 人 简单 项 目 
在 第 9.2 节 的 例子 中 ， 我 们 可 以 这 样 组 织 目 录 : 








一 components 

| | 一 App.vue 

We t 

L— vuex 
— store.js // store 中 包含 了 state 和 mutations 对 象 
| 一 actions.js 


| 一 index.html 
[一 app. js 





如 果 你 的 state 和 mutations 内 容 偏 多， 也 可 以 拆 
成 独立 的 两 个 文件 : 





— vuex 
— index.js // store 中 包含 了 state 和 mutations 对 象 


| 一 mutations.js 


| 一 actions.js 





9.6.2 KÆ M H 


在 大 型 项 目 中 ， 可 以 把 相对 独立 的 state 分 割 成 
单独 的 模块 ， 每 个 模块 只 修改 自 吴 的 state 状 态 。 而 
对 应 的 子 模 块 文件 中 包含 对 应 的 state 和 mutations。 
并 且 action 的 类 型 也 可 以 单独 集合 成 一 个 文件 
mnutation-types.js， 避 免 mutations 和 actions 中 各 目 使 
用 字符 串 弟 量 ， 使 得 维护 和 修改 更 方便 。 


大 型 项 目 结构 如 下 : 














— api 
| 一 后 端 数据 交互 接口 


| 一 components 


| | 一 App.vue 
L— vuex 
| 一 actions.js // store 中 包含 了 state 和 mutations 对 


象 
| 一 store.js 
| 一 mutation-types.js 
— modules 


| 一 moduleA.js 
| 一 moduleB.js 
| 一 index.html 


| 一 app.js 





以 vuex/modules/moduleA.js 为 例 : 





import { ACTION A } from './../mutation-type' 


const state = { 
rootA : { 


} 


const mutations = { 
[ACTION A](state, param) { 
// 子 模块 中 mutations 的 参数 state 值 即 为 模块 内 设 定 的 stat 
e， 无 法 获取 其 他 模块 的 state 状 态 
// 子 模块 的 state 根 节点 不 能 在 模块 内 部 改写 ， 即 state = { 
we | 这 样 的 写法 是 无 效 的 
// 只 能 用 以 下 的 写法 修改 状态 
state.rootA = .... 
} 
} 





export default { 
state, 
mutations 


| 


vuex/store.js 中 集合 多 个 模块 示例 : 


import Vue from ‘vue'; 

import Vuex from ‘vuex' ; 

import ModuleA from './modules/moduleA' ; 
import ModuleB from './modules/moduleB' ; 
Vue.use(vuex) ; 


export default new Vuex.store({ 


modules : { 
moduleA, 
moduleB 


} 
}) 





此 时 整体 的 state 值 就 变 成 了 : 





module a: { 
rootA : { 


e00000 


module b : { 


; 


ee 


从 上 面 这 个 例子 可 以 看 出 ， 我 们 已 把 每 个 模块 
的 state 和 mnutations 合 并 在 一 个 文件 中 ， 而 actions.js 
仍 统一 放置 在 vuex 目 录 下 。 这 是 因为 action 可 能 会 
触发 多 个 模块 的 mutations。 例 如 在 vuex/actions.js 
中 ， 可 以 写成 如 下 : 


import * as actions from './mutation-types' ; 

export const updateModuleA = ({ dispatch }, param) => { 
dispatch(actions.MODULE_A, param); 
dispatch(actions.MODULE_B, param); 


} 





此 时 ， 这 个 action 行 为 束 触 友 了 两 个 分 属 不 同 
模块 的 mutations， 修 改 了 两 次 state。 如 果 我 们 加 入 
了 logger 的 中 间 件 ， 就 可 以 看 到 控制 台中 输出 了 : 


Vv mutation MODULE_A @ 04:49:58.262 
prev state > object {module_a: Object, module_b: Object} 
mutation > Object {type: "“MODULE_A", payload: Array[1]} 
next state b Object {module_a: Object, module_b: Object} 
> Object {__ob 


: Observer} 


> Object {module_a: Object, module_b: Object} 
> Object {module_a: Object, module_b: Object} 
Vv mutation MODULE_B @ 04:49:58.267 


prev state > Object {module_a: Object, module_b: Object} 
mutation > Object {type: "MODULE_B", payload: Array[1]} 
next state b Object {module_a: Object, module_b: Object} 


build. js:19066 
build.js:19071 


build. js:19072 
build.js:19073 
build. js:19457 
build. js:19054 


build.js:19066 
build. js:19071 


build. js:19072 
build. js:19073 


9.7 ”实例 

本 节 会 利用 vuex 制 作 一 个 简单 的 hb5 页 面 排版 工 
具 ， 我 们 预 设 了 一 些 文字 和 图 片 排版 样式 的 组 件 ， 
用 户 可 以 自主 选择 需要 的 组 件 并 输入 内 容 进行 简单 
的 排版 。 

最 终 的 使 用 界面 如 图 9-2 所 示 。 


请 输入 内 容 











图 9-2 


整个 项 目 会 采取 ES6 的 写法 ， 采 用 webpack 作 为 
编译 工具 ， 并 使 用 vue-loader 来 处 理 *.vue 文 件 ， 整 
体 日 录 结 构 如 下 : 





| 一 base // 该 目录 下 包含 了 所 有 文字 和 图 片 排版 样式 组 件 
— Image. vue 


| 一 Text.vue 


e00000 


| 一 App.vue 

[一 Content.vue // 编辑 区 域 组 件 

[一 Side.vue // 侧 边栏 组 件 ， 用 于 添加 组 件 
[一 Toolbar.vue // base 组 件 控制 器 ， 用 于 改变 排序 和 删除 
— utils 

— factory.js // base 组 件 的 工厂 函数 
L— vuex // 本 例 只 是 一 个 简单 的 demo， 并 没有 采取 分 成 子 模块 的 
方式 

| 一 store.js 

| 一 actions.js 
| 一 index.html 
| 一 app.js 





9.7.1 state 结 构 


由 于 Vue.js 本 里 的 特点 就 是 数据 驱动 视图 ， 所 
以 一 开始 就 会 先 设 定好 state 的 结构 及 mutations 方 
法 。vuex/store.js 代 人 码 如 下 : 





import Vue from 'vue' 

import Vuex from 'vuex' 

import createLogger from ‘vuex/logger' 

import createElement from './../utils/factory.js' 


Vue.use(Vuex) 


const state = { 
items: [], // 用 于 存储 base 组 件数 据 结构 的 数组 
isPreview : false // 当前 形式 为 可 编辑 或 预览 状态 
} 





const mutations = { 
ADD_ITEM (state, type) { 
state. items.push(createElement(type)); // 利用 工厂 
模式 增加 base 组 件 
Jo 


DELETE_ITEM (state, index) { // 删除 base 组 件 
state.items.splice(index, 1); 


Jo 
SORT_ITEM(state, index, newIndex) { // 改变 base 组 件 
排序 
var origin = state.items.splice(index, 1)[@] 
state.items.splice(newIndex, ©, origin); 
Jo 
UPDATE_ITEM(state, index, key, value) { // 更 新 base 
组 件 内 容 
var origin = state.items[ index]; 
origin[key] = value; 
state.items.$set(index, origin); 
Jo 


TOGGLE_PREVIEW(state) { 
state.isPreview = !state.isPreview; // 切 换 当 前 预览 
编辑 模式 
} 


B 


export default new Vuex.Store({ 
state, 
mutations, 
middlewares : [createLogger({ 
collapsed : false, 
})] 
}) 





utils/factory.js 用 于 生成 base 组 件 的 数据 类 型 ， 
代码 如 下 : 





function createElement(type) { 
Switch(type) { 
case 'text' : // base/Text.vue 组 件 的 数据 结构 
return { 
type, 
content : ' 请 输入 内 容 ' 
} 
case 'eleImage' : // base/Image.vue 组 件 的 数据 结构 
return { 
type, 
url : 
} 
case ‘mix 
return { 
type, 
url : ", 
content : 


export default createElement; 





9.7.2  actions.js 


该 示例 中 的 actions.js 较 为 简单 ， 和 暂时 不 涉及 后 
半数 据 交 互 ， 确 认 好 所 需 的 参数 和 dispatch 调 用 的 
方法 即 可 。vuex/actions.js 代 码 如 下 : 





// 新 增 列表 元 素 
export const addItem = ({ dispatch }, type) => { 
dispatch('ADD_ITEM', type) 


} 

// 删除 列表 元 素 

export const deleteItem = ({ dispatch }, index) => { 
dispatch('DELETE_ITEM', index) 





} 
// 对 列表 元 素 进行 排序 
export const sortItem = ({ dispatch }, index, newIndex) 
=> { 
dispatch('SORT_ITEM', index, newIndex) 


} 
// 更 新 列表 元 素 内 容 
export const updateItem = ({ dispatch }, index, attr, v 
alue) => { 
dispatch('UPDATE_ITEM', index, attr, value) 


} 

// 切换 当前 模式 

export const togglePreview = ({ dispatch }) => { 
dispatch(' TOGGLE PREVIEW' ); 


四 
9.7.3 app.js 


此 例 中 的 app.j$ 较 为 简单 ， 仅 仅 是 引入 了 store 
对 象 ， 设 置 了 根 元 素 和 包含 的 根 组 件 。app.js 代 三 
如 下 : 





import Vue from ‘vue' 
import store from './vuex/store' 
import App from './components/App.vue' 


new Vue({ 
store, 
el: ‘body', 
components: { App } 





9.7.4 组 件 结构 
示例 中 整体 包含 4 个 功能 组 件 如 下 : 
(1) App.vue: 整个 应 用 的 根 组 件 。 





(2) Side.vue: 侧 边 栏 组 件 ， 用 于 增加 base 组 件 
及 预览 /编辑 模式 的 切换 。 


(3) Content.vue: base 组 件 列表 。 
(4) Toolbar.vue: base 组 件 的 工具 栏 。 
components/App.vue 代 码 如 下 : 


<template> 
<div id="app"> 
<side></side> 
<content></content> 
</div> 
</template> 


<script> 
import Side from './Side.vue' 
import Content from './Content.vue' 


export default { 
components : { 
Side, 
Content 
} 
} 


</script> 





components/Side.vue{t iS Un F : 


<template> 
<div class="side"> 
<button class="toggle" @click="togglePreview() "> 
<template v-if="isPreview" > 编辑 </template> 
<template v-else>fili</template> 
</button> 
<ul class="list-unstyled" v-show="!isPreview"> 
<li @click="addItem( 'text')">MSF</1li> 
<li @click="addItem('eleImage' )"> 图 片 </1i> 
<li @click="addItem('mix' )"> 图 文 </1i> 
</ul> 
</div> 
</template> 


<script> 
import { addItem, togglePreview } from '../vuex/acti 
ons' 


export default { 
data() { 


js 
vuex: { 
getters : { 
isPreview: state => state.isPreview 
ia 
actions: { 
addItem, //， 添 加 base 组 件 
togglePreview // 切换 state.isPreview 状 态 
} 
} 
} 


</script> 


Ooo O 


components/Content.vuef( 3 4 F : 





<template> 
<div class="content"> 
<div class="item" v-for="item in items"> 


<toolbar v-if="!isPreview" :item="item" :item-ind 
ex="$index"></toolbar> 
<!- 
此 处 用 了 一 个 动态 组 件 ， 即 根据 item.type 去 加 载 对 应 的 
base 组 件 
需要 注意 的 是 item.type 的 值 需要 和 components 选 项 中 
的 属性 对 应 起 来 
例如 : :item.type 为 text，components 中 的 属性 为 Text 
--> 
<components :is="item.type" :item="item" :item-in 
dex="$index"></components> 
</div> 
</div> 
</template> 





<script> 
import Text from './../base/Text.vue' ; 
import EleImage from './../base/Image.vue' ; 
import Mix from './../base/Mix.vue' ; 
import Toolbar from './Toolbar.vue' ; 


export default { 
components : { 
Text 
， EleImage 


, Mix 


， Toolbar 
Js 
vuex: { 
getters: { 
items: state => state.items, 
isPreview : state => state.isPreview 
} 
} 
</script> 





components/Toolbar.vue{tfi4 4 F : 








<template> 
<ul class="item-controls"> 
<li> 
<!- 组 件 上 移 一 位 ， 在 首位 的 时 候 不 显示 这 个 图 标 --> 
<i v-if="itemIndex != @" @click="sortItem(itemInd 


ex, itemIndex - 1)" 
class="glyphicon glyphicon-chevron-up"> 
</i> 
</li> 
<li> 
<!— 删除 这 个 组 件 --> 
<i @click="deleteItem(itemIndex)" class="glyphico 
n glyphicon-remove"> </i> 
</li> 
<li> 
<!- 组 件 下 移 一 位 ， 在 末 位 的 时 候 不 显示 这 个 图 标 --> 


<i v-if="itemIndex != items.length - 1" @click="s 








ortItem(itemIndex, itemIndex + 1)" 


class="glyphicon glyphicon-chevron-down"> 


</i> 
</li> 
</ul> 
</template> 
<script> 
import { deleteItem, sortItem } from 
gi 
export default { 
props : ['item', 'itemIndex'], 
vuex: { 
getters: { 
items: state => state.items 
Jo 
actions: { 
deleteItem, 
sortItem 
} 
} 
} 
</script> 


",./vuex/action 





9.7.5 “ base 组 件 


base 组 件 即 是 可 供 排 版 的 组 件 ， 这 个 组 件 主要 
对 应 state 中 items 数 组 中 的 单个 item。 每 个 组 件 提供 


了 一 定 的 样式 和 可 供 修 改 的 内 容 。 我 们 以 Text.vue 
和 Image.vue 两 个 组 件 来 进行 说 明 。 





base/Text.vue 
<template> 
<div class="text-wrap"> 





<!- 组 件 提供 两 种 模式 ， 非 预览 模式 下 才 可 以 进行 编辑 - - > 
<div v-if="!isPreview"> 
<!- 
此 处 的 textarea 没 有 绑 定 v-mode1l， 而 是 在 blur 的 时 候 
触发 了 actions。updateItem , 
以 此 来 修改 state 的 状态 
--> 
<textarea :value="item.content" @blur="update" cl 
ass="form-control"></textarea> 
</div> 
<l- 预览 模式 ， 仅 可 见 内 容 ， 无 法 进行 修改 --> 
<div v-else class="preview"> 
{{ item.content }} 
</div> 
<div class="split"></div> 
</div> 
</template> 


<script> 

import { updateItem } from '../vuex/actions' 
export default { 

props : ['itemIndex', ‘item'], 


vuex: { 
getters : { 
isPreview : state => state.isPreview 
}o 


actions: { 


updateItem 


} 
J 
methods : { 
update(e) { 
this.updateItem(this.itemIndex, 'content', e.targ 
et.value); 
} 
} 
} 
</script> 
base/Image.vue 
<template> 
<div> 
<!- 此 处 和 Text.vue 一 样 ， 也 是 通过 state.isPreview 的 值 来 
控制 是 否 为 预览 模式 --> 
<div v-if="!isPreview"> 
<input v-el:file v-if="!item.url" @change="upload 
class="form-control" type="file"> 
<img v-if="item.url" :src="item.url"> 
</div> 
<div v-else> 
<img v-if="item.url" :src="item.url"> 
</div> 
</div> 
</template> 


<script> 
import { updateItem } from '../vuex/actions' 


export default { 
props : ['itemIndex', ‘item'], 
vuex: { 
getters : { 
isPreview : state => state.isPreview 


J 


actions: { 
updateItem 


} 
}s 
methods : { 
upload(e) { 
var fileElement = this.$els.file; 
var file = fileElement.files[@]; 
// 获取 input 上 传 的 文件 ， 由 于 此 实例 不 和 后 端 交 互 ， 
// 所 以 直接 获取 文件 在 该 document 中 的 ur1 路 径 ， 进 行 展 





var blobURL = window.webkitURL.createObjectURL 


this.updateItem(this.itemIndex, ‘url’, blobURL) 


</script> 





9.7.6 ”展示 结果 








最 终 运行 代码 结果 如 图 9-3 所 示 。 





请 输入 内 容 








Choose File NO file chosen 





图 9-3 


用 户 可 以 在 侧 边 栏 中 添加 任意 组 件 ， 并 在 右 侧 
修改 其 内 容 或 进行 排序 ， 也 可 以 切换 预览 状态 ， 对 
最 终 效果 进行 查看 ， 如 图 9-4 所 示 。 


请 输入 内 容 








This is Vue.js 








USE 





图 9-4 


对 于 编辑 的 结果 ， 我 们 可 以 将 state 中 的 数据 保 
存 到 后 端 ， 并 新 建 一 个 类 似 于 preview.vue 这 样 的 组 
件 ， 只 展示 items 的 预览 模式 ， 这 样 束 可 以 供 普通 用 
户 进 行 访问 和 查看 。 我 们 也 可 以 利用 类 似 于 
html2canvas 的 框架 ， 将 当前 页 面 内 容 保 存 成 图 片 ， 
这 样 也 就 省 去 了 部 分 开发 页 面 的 工作 量 。 


9.8 Vue.js 2.0 的 变化 


同 Vue-router 一 样 ， 随 着 Vue.js 2.0 的 更 新 ， 
Vuex 也 推出 了 新 的 2.0 版 本 。 其 中 ，Vuex 主 要 在 语 
法 层面 、 模 块 移植 和 组 合 以 及 配合 Vue.js 2.0 的 新 特 
性 服务 妆 泻 染 方 面 进行 了 修改 ， 所 以 组 件 调 用 Vuex 
的 方式 发 生 了 比较 大 的 变化 ， 本 市 主要 从 使 用 方法 
上 对 2.0 进 行 部 分 说 明 。 








9.8.1 State 


Vuex 2.0 中 上 废除 了 组 件 中 的 vuex 选 项 ， 组 件 本 
身 就 可 以 通过 this.$store.state 的 方式 获取 数据 ， 考 虑 
到 state 中 的 数据 是 时 第 更 新 的 ， 官 方 推荐 在 计算 属 
性 中 设 定 获取 state 数 据 ， 例 如 : 








const Content = { 
template: '<div class="item" v-for="item in items">{ 
{ item }}</div>', 
computed: { 
items () { 
return this.$store.state.items 


而 当 一 个 组 件 中 需要 获取 state 内 多 种 属性 时 ， 
Vuex 提 供 了 一 个 mapState 的 帮助 函数 ， 可 以 简化 上 
述 的 写法 : 





import { mapState } from 'vuex' 


export default { 
fp bes 
computed: mapState({ 
items: state => state.items, 
// 可 以 直接 赋值 字符 串 ， 等 价 于 state => state.items 
itemsAlias: 'items', 


// 函数 内 可 调用 组 件 实例 this， 可 以 对 state 的 数据 加 上 组 件 


内 部 的 处 理 
localItems (state) { 
return state.items.push(this.localItems) 
} 
}) 
} 





mapState 除 了 接受 对 象 参数 之 外 ， 也 接受 数组 
参数 ， 相 当 于 直接 获取 state 中 的 多 个 属性 ， 且 在 当 
前 组 件 内 state 属 性 按 原 名 调用 ， 例 如 : 








computed: mapState([ 
// 组 件 实例 this.count 即 为 store.state.count 


"count ' 


] ) 


男 外 ， 妆 组 件 内 本 里 束 含 有 计算 属性 时 ， 我 们 
可 以 通过 ... 扩 展 运 算 符 来 进行 书写 ， 这 样 代码 看 上 
去 更 简洁 ， 例 如: 


computed: { 
localComputed () { /* ... */ }, 
...mapState({ 
items: state => state.items 


}) 


} 





..mapState HP 会 将 目 喘 内 部 的 属性 添加 到 
新 的 对 象 中 ， 即 最 后 computed 接 收 到 的 对 象 为 { 
localComputed : function(){...}, items : function() 


{...}}。 





9.8.2 Getters 


Vuex 2.0 中 将 原先 游离 于 外 部 的 Getters 模 块 包 
含 了 进来 ， 我 们 在 声明 一 个 Vuex.Store() 实例 的 时 


候 可 以 直接 传 入 getters 对 象 ， 对 象 属性 为 可 接受 
state AH ea, PIU: 


const store = new Vuex.Store({ 
state: { 
items: [ 
{ id: 1, type: ‘text’ }, 
{ id: 2, type: ‘image’ } 
] 
Jo 
getters: { 
getTexts: state => { 
return state.items.filter(item => item.type == 't 
ext') 





我 们 在 组 件 内 就 可 以 通过 
this.$store.getters.getTexts 直 接 获 取得 选 后 的 数据 ， 
同 state 类 似 ，Vuex 也 骏 露 了 mapGetters 函 数 帮 助 我 
们 获取 getters 方 法 ， 例 如 : 








import { mapGetters } from 'vuex' 


export default { 
sae 
computed: { 
...mapGetters([ 


‘getTexts' 





9.8.3 Mutations 


Mutations 的 触发 方式 发 生 了 变化 ， 取 消 了 原先 
的 dispatch 接 口 ， 而 蔡 换 成 了 store.commit (type, 
data) 的 方式 进行 触发 。 声 明 的 方式 没有 发 生变 
化 ， 依 旧 是 实例 化 Vuex.Store 的 时 候 传 入 mutations 
对 象 ， 例 如 : 





const store = new Vuex.Store({ 
state: { 
items: 
Jo 
mutations: { 
add (state, item) { 


state.items.push(item) ; 





与 Vue.js 1.0 不 同 的 是 ，Vue.js 2.0 中 并 不 再 强制 
组 件 内 必须 使 用 actions 的 函数 并 dispatch 后 才能 间接 
调用 mnutations， 而 是 组 件 内 可 以 直接 调用 mutations 
方法 ， 即 this.$store.commitCadd', item)， 或 者 只 传递 
一 个 选项 参数 ， 包 含 type 属 性 即 可 ， 例 如 
this.$store.commit({ type : 'add', item: item }). Me 
种 程度 上 说 ， 简 化 了 对 state 更 新 的 流程 。 但 需要 注 
意 有 的 是 ，mutations 中 的 操作 只 能 为 同步 操作 ， 如 果 
需要 获取 异步 数据 ， 则 必须 使 用 actions 来 进行 处 
H 








同样 ， 我 们 也 可 以 使 用 Vuex 的 mapMnutations 方 
法 来 简化 调用 方式 : 


import { mapMutations } from 'vuex' 


export default { 
pare 
methods: { 
...mapMutations({ 
"add' 





9.8.4 Actions 


同 Getters 类 似 ，Actions 在 Vue.js 2.0 中 也 归 入 到 
了 Vuex.Store 选 项 中 ， 我 们 在 实例 化 的 时 候 也 需要 
传 入 actions 参 数 ， 例 如 : 


const store = new Vuex.Store({ 


mutations: { 
add (state, item) { 
state.items.push(item) 
} 
}s 
actions: { 
add (context) { 
context. commit('add' ) 





其 中 actions 参 数 context 主 要 包含 了 commit、 
dispatch, 、state 和 getters 属 性 ， 调 用 commit 即 可 触发 
mnutations 函 数 ， 使 用 dispatch 则 可 继续 触发 其 他 
actions 函 数 。mapActions 用 法 与 上 述 类 似 : 





import { mapActions } from 'vuex' 


export default { 


TL? aes 
methods: { 
...mapActions([ 
'add' 





从 context 的 dispatch 方 法 可 以 看 出 ，actions 文 持 
多 个 action 的 组 合 使 用 ， 并 且 经 常会 使 用 到 异步 请 
求 获取 服务 端 数 据 ， 我 们 可 以 在 action 函 数 中 返回 
Promise 对 象 来 处 理 这 种 情况 。 例 如 : 


actions: { 
actionA ({ commit }) { 
return new Promise((resolve, reject) => { 
setTimeout(() => { // 模拟 了 异步 请 求 获 取 数 据 
commit('someMutation' ) 
resolve() 
}, 1000) 





SR fa TE Fe fthaction P Wit Ay LAXA yal: 


大 
actionB ({ dispatch, commit }) { 
return dispatch('actionA').then(() => { 
commit('someOtherMutation' ) 





9.8.5 Modules 


最 后 说 明 下 Vue.js 2.0 中 State 的 分 模块 处 理 方 
式 ， 每 个 模块 都 可 以 包含 目 己 的 state、mutations、 
actions 和 getters，Vuex 也 会 给 它们 多 暴露 一 个 
rootState 的 参数 ， 可 以 用 于 访问 底层 的 state 对 象 。 
大 致 的 使 用 方法 如 下 : 





const moduleA = { 
state: { ... }, 
mutations: { ... }, 
actions: { ... }, 
getters: { ... } 

} 


const moduleB = { 
state: { ... }, 
mutations: { ... }, 
actions: { ... } 


} 


const store = new Vuex.Store({ 
modules: { 
a: moduleA, 
b: moduleB 





在 子 模块 中 的 getters、mnutations 和 actions 中 ， 
获取 的 state 缘 为 子 模 块 本 喘 的 state， 而 底层 模块 的 





引用 将 会 暴露 在 action 的 context.rootState 和 getter 的 
第 三 个 参数 中 ， 例 如 : 








const moduleA = { 
ya 
actions: { 
actionA ({ state, commit, rootState}) { 


AR 
} 
} 
const moduleA = { 
[L i 
getters: { 
getSth (state, getters, rootState) { 
/a 
} 
} 


第 10 章 ”路 平台 开 有 友 : Weex 


移动 端 开 有 友 ， 特 别 是 hybrid 这 类 技术 是 现在 前 
Mp ZED IAW —P tl. 4£20114F, phoneGap (Il 
改名 cordova) 这 个 打包 工具 区 已 问世 ， 它 能 把 Web 
项 目 打 包 成 native app， 可 以 在 ios，android， 甚 至 
于 wp 上 运行 。 随 着 angularjs，reactjs 的 面世 ， 这 类 
hybrid 技 术 也 有 了 各 目 结合 的 方式 ， 有 基于 
angularjstcordovalJionic, ReactNative © x + ih K 
爆 。 而 阿里 集团 在 2016 年 6 月 份 也 开源 了 采用 Vue.js 
核心 源码 的 weex， 在 语法 上 更 贴近 Web 开 发 ， 从 公 
布 的 数据 来 看 ， 在 性 能 上 对 比 其 他 同类 技术 也 有 一 
ERA. 


























10.1 Weex 人 简介 


Weex 作 为 一 项 跨 平 台 技 术 ， 建 并 了 一 套 源码 
转化 及 native 与 JS 通信 的 机 制 。 在 开发 阶段 ， 我 们 
可 以 在 .we 文件 中 编写 <template>、<style> 和 
<script> 标 签 ，weex 提 供 的 转化 右 可 以 将 其 转换 成 
JS Bundle, ŽE FEARS ai Mig LA Mey Dy Fe inn ASD Ts 
求 。 当 客户 端 接 收 到 这 些 JS Bundle 后 ， 又 可 以 被 客 
户 端 中 的 JS 引 警 调用， 用 于 管理 Native 视 图 的 演 
染 、API 的 调用 以 及 处 理 用 户 的 交互 。 图 10-1 即 为 
weex 官 网 给 出 的 整体 流程 图 。 
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图 10-1 


其 中 JS Framework 提 供 了 模块 注册 、 虚 拟 
DOM、Native 通 信 等 功能 。 当 JS Bundle 从 服务 器 下 
载 后 ， 将 会 被 注册 成 模块 ， 并 编译 成 虚拟 DOM ， 
发 送 深 染 指令 给 Native。 而 iD0S、Android 和 H5 分 别 
有 具有 自己 的 演 染 引擎 ， 也 就 能 将 同一 段 代 码 分 别 在 
不 同 的 端 展示 成 相同 的 样式 ， 并 进行 事件 绑 定 ， 处 
理 用 户 的 交互 。 由 于 采用 的 方案 是 泻 染 成 Native 视 
图 ， 所 以 在 性 能 上 会 比 传统 的 webview 打 包 方 式 要 
好 。 但 相应 的 ， 对 于 Web 前 端 开发 者 来 说 并 不 能 使 
用 所 有 HTML 中 的 特性 ， 因 为 这 些 特性 都 需要 iOS 
或 Android 演 染 引 擎 的 支持 ， 如 果 尚 未 支持 的 话 ， 
在 Native 端 其 实 并 不 能 展现 出 预期 的 效果 。 

















10.2 Weex z£ 


首先 需要 下 载 weex 代 人 码 。 
fEhttps://github.com/alibaba/weex 网 站 上 下 载 ， 可 以 
选择 v0.6.1 版 本 。 在 ios 和 android 中 启动 weex 分 别 需 
要 安装 各 目的 环境 。 


10.2.1 iost iš “wk 
weex fh mi Mios A RU T : 
© 安装 xcode， 可 从 app store 中 下 载 。 


D 安装 CocoaPods (ios 开 发 的 第 三 方 资源 管理 
工具 ， 类 似 于 npm) 。 

需要 先 安装 ruby，mac 默 认 自 带 ruby， 但 版 本 
不 一 定 够 高 ， 可 以 通过 rvm (类 似 于 nvm， 同 时 管 
理 多 版 本 环境 ) 更 新 ruby。 选 择 2.3.0 版 本 即 可 正常 
安装 CocoaPods。 


选择 2.3.0 版 本 即 可 正常 安装 CocoaPods。 安 装 


命令 为 : sudo gem install cocoapods 


(3) 进入 weex 目 录 下 ios/playground, 并 运行 pod 


install， 安 装 第 三 方 资源 ， 该 过 程 比较 长 ， 请 耐心 
等 待 。 


(4) 用 xcode 打 开 WeexDemo.xcwork space。 


© 单 击 “ 运 行 ? 即 可 看 到 官方 的 demo， 如 图 10-2 
FITAR o 
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图 10-2 


10.2.2 android 环 培 安 装 


android} tg 22382 70 FRU F 

O 下 载 安装 JDK 和 Android Studio. 

(2) 用 android studio 打 开 android/playground。 

O BIKA RR AE AOR I RS, FTP SDK 


manager, ##i{RAI10-3 Fix LPR, WRT 
的 android SDK. 





B Android Support Repository 35 fw Installed 


B Intel x86 Emulator Accelerator (HAXM installer) 6.0.3 Æ Installed 


图 10-3 


O 安 儿 成 功 后 ， 单 击 运行 ， 如 图 10-4 所 示 。 





a1 


图 10-4 


© 即 可 看 到 官方 样 例 ， 如 图 10-5 所 示 。 
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图 10-5 
10.2.3 ”web 端 运行 


weex 同 样 也 支持 在 web 端 直接 运行 ， 步 又 如 
F: 


Q 在 weex 代 码 根 目录 下 运行 ./start。 


D 通过 浏览 器 访问 http://127.0.0.1:12580/ ， 如 
图 10-6 所 示 。 


< 
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图 10-6 


这 样 三 端的 环境 基本 束 搭 建 起 来 了 ， 我 们 可 以 
先 在 Web 中 进行 开发 ， 达 到 一 定 的 效果 后 束 可 以 使 
用 ios 和 android 模 拟 器 观察 native 下 页 面 的 展示 和 效 
R, 








10.3 “Weex 实 例 与 运行 


weex 开 源 代码 目录 下 的 exapmles 给 用 户 提 供 了 
不 少 已 经 写 好 的 实例 ， 可 以 先 通 过 hello.we 这 个 样 
例 简 单 介绍 下 weex 的 开发 。 

如 第 10.2 节 所 述 ， 在 weex 根 目录 下 运行 ./start 
时 ， 可 以 通过 浏览 右 访 问 到 官网 提供 的 样 例 ， 单 
击 “Hello World” 即 可 跳 转 到 hello.we 对 应 的 页 面 ， 

如 图 10-7 所 示 。 


| 127.0.0.1:12580/index.html?page=./examples/build/hello.is 
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Hello World. 


图 10-7 


hello.we 代 码 如 下 : 


<template> 
<div> 
<text style="font-size:10@px;">Hello World.</text> 
</div> 


</template> 





基本 语法 与 .vue 和 vue-loader 类 似 ， 也 是 在 一 个 
文件 中 通过 template、style、script 标 签 包 里 对 应 的 
html、css、js 结 构 。weex 也 提供 了 多 个 内 置 标签 ， 
例如 本 例 中 的 text， 来 进行 页 面 的 布局 。 


我 们 可 以 试 着 对 hello.we 进 行 以 下 修改 ， 增 加 
一 些 样式 和 js 方法 。 











<template> 
<div> 


<text class="title">{{ msg }}</text> 
<!- 
weex 内 置 button 标 签 
onclick 为 绑 定 事件 语法 
type 和 size 分 别 对 应 了 button 内 置 的 样式 
--> 
<wxc-button value="alert" onclick="alert" type="pr 
imary" size="middle"> </wxc-button> 
</div> 
</template> 


<script> 


// 引入 weex 的 内 置 组 件 ， 本 例 中 主要 是 为 了 使 用 wxc-button 标 
aS 
require( 'weex-components' ) ; 


// 输出 的 对 象 与 Vue .js 类 似 ， 符 合 Vue .extend 属 性 的 构建 器 对 


module.exports = { 


data : { 

msg : ‘Hello Weex' 
Jo 
methods : { 


alert : function() { 
alert(this.msg); 
} 
} 
}; 


</script> 


<style> 
title { 
font-size: 100px; text-align: center; 
} 
</style> 
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图 10-8 


如 果 需 要 在 ios 或 android 环 境 中 运行 程序 ， 看 到 
实际 效果 的 话 ， 我 们 有 两 种 方式 : 


© 修改 ios 或 android 应 用 的 jsbundle 的 jp 访问 地 
址 ， 即 native app 实 际 调用 的 js bundle 是 在 你 当前 机 
髓 局 动 的 服务 上 的 。ios 对 应 的 修改 文件 为 
DemoDefine.h， 将 其 中 的 #define CURRENT_IP 








@"your computer device ip"， 修 改 为 自己 机 器 的 局 
域 网 的 ip 即 可 ; android 则 修改 
app/java/com.alibaba.weex/IndexActivity 文 件 中 的 
private static String CURRENT_IP= DEFAULT_IP 


D 首先 安装 weex 的 开发 工具 weex-toolkit: npm 


install -g weex-toolkit. 


然后 在 手机 上 安装 weex 官网 提供 的 android 或 
ios 的 playground 应 用 。 


在 weex 根 目录 下 运行 命 A>weex 


examples/hello.we —qr. 


然后 用 手机 的 playground 扫 描 这 个 二 维 码 (pc 
和 手机 需要 在 同一 wifi 下 》， 即 可 在 手机 上 看 到 效 
果 ， 如 图 10-9 所 示 。 








localhost: weex-@.6.1 GavinCL¥$ weex examples/hello.we --gr 


nto 


The following QR encoding url is 
http: //18.62.58.26:6051/weex_tmp/hS_render/hel lo. js?wsport=d 


Please download Weex Playground app from https://github.com/alibaba/weex and scan this QR 
ame Hi-Fi network as your computer runing weex server. 





图 10-9 


10.4 “Weex 基 础 语法 


Weex 鸭 语法 与 Vue.js 类 似 ， 只 不 过 指令 都 去 挥 
了 v- 这 个 前 缀 ， 本 节 人 简单 介绍 一 下 Weex 的 基础 用 
法 ， 主 要 包含 数据 绑 定 、 事 件 绑 定 和 模板 逻辑 这 三 
个 方面 。 


10.4.1 AGES 


Weex 的 数据 绑 定 也 是 采用 {f}} 作 为 标记 ， 同 时 
也 文 持 语法 表达 式 和 计算 属性 ， 暂 不 文 持 watch 和 
model 特 性 ， 如 有 果 需 要 同步 用 户 的 输入 数据 ， 需 要 
在 oninput 或 者 onchange 上 手动 修改 数据 。 








<template> 
<div> 
<!- 普 通 绑 定 --> 
<text class="title">{{ msg }}</text> 
<!- 文 持 表 达 式 --> 
<text>{{ prefix + '-' + msg }}</text> 
<! 一 使 用 计算 函数 - - > 
<input type="number" class="input" value="{{yuan}} 
" onchange= "changePrice" /> 
</div> 
</template> 
<script> 
require( 'weex-components' ) ; 


module.exports = { 


data : { 
msg : 'Hello Weex', 
prefix : 'ali', 
price : 100, 

J 

computed : { 
yuan : { 


get : function() { 
return (this.price / 100).toFixed(2); 


set : function(value) { 
this.price = value * 100; 


Jo 
methods : { 


changePrice : function(e) { 
this.yuan = e.value; 
} 
} 
}; 


</script> 





10.4.2 ”事件 绑 定 





Weex 的 事件 绑 定 直接 采用 的 是 行内 绑 定 ， 例 
如 : 


<template> 


<wxc-button value="alert" onclick="alert('arg', $eve 
nt)" type= "primary" size="middle"></wxc-button> 
</template> 


<script> 
module.exports = { 
methods: { 
alert: function (argi, e) { 
// TODO 


} 
} 


</script> 





$event 对 象 中 主要 包含 了 3 个 属性 。 
Q type: 触发 事件 的 名 称 。 

© target: 触发 事件 的 元 素 。 

©) timestamp: 触发 时 间 。 


10.4.3 ”模板 逻辑 


Weex 中 玉 用 if 和 repeat 属 性 来 进行 模板 的 迎 辑 
控制 ， 使 用 方法 如 下 : 


<template> 


<container> 
<text onclick="toggle">Toggle</text> 
<image src="..." if="{{shown}}"></image> 
</container> 
<container> 
<container repeat="{{list}}" class="{{gender}}"> 
<image src="{{avatar}}"></image> 
<text>{{nickname}}</text> 
</container> 
</container> 
</template> 





其 中 repeat 也 文 持 {{v in list}}. {{(k, v) in list}} 





的 写法 ， 以 及 $index 属 性 获取 数组 序列 。 


10.5 “Weex 内 置 组 件 


Weex 目 身 提 供 了 不 少 内 置 的 组 件 ， 对 于 一 些 
电 商 类 、 新 闻 类 应 用 来 说 提供 了 不 错 的 文 持 。 我 们 
只 需要 调用 组 件 并 设置 相关 的 属性 就 可 以 生成 三 病 
都 能 使 用 的 视图 功能 ， 极 大 提升 了 开发 效率 。 本 节 
主要 介绍 weex 组 件 的 公共 属性 及 事件 ， 以 及 部 分 组 
件 的 属性 及 使 用 方式 。 








10.5.1 scroller 


scroller 组 件 可 以 包含 多 个 子 组 件 ， 如 果子 组 件 
的 高 度 总 和 超过 了 scroller 本 和 里 的 高 度 ， 即 可 深 动 子 
组 件 。 








<template> 
<scroller> 
<div repeat="{{list}}"> 
<text>{{name}}: ${{price}}</text> 


</div> 
</scroller> 
</template> 


<script> 
module.exports = { 
data: { 
list: [ 
{name: '...', price: 100}, 


{name: '...', price: 500}, 
{name: '...', price: 1.5}, 


</script> 





scroller 组 件 还 可 以 包含 refresh 和 ]oading 子 组 
件 ， 用 于 提供 下 拉 刷 新 和 上 拉 加 载 更 多 这 两 个 功 
能 。 我 们 以 loading 为 例 : 





<loading class="loading-view" display="{{loading displa 
y}}" onloading= "onloading"> 
<loading-indicator style="height:60;width:60" ></loa 
ding-indicator> 
</loading> 
<script> 
require( 'weex-components' ) ; 
module.exports = { 
methods: { 
onloading: function(e) { 
var self = this; 


self.loading display = ‘show' ; 
setTimeout(function () { 
self.loading display = ‘hide'; 


}, 1000) 


refresh _display: ‘hide’, 
loading display: ‘hide’, 
sections: [ 


eeeee © 


</script> 





组 件 提 供 onloading 事 件 和 display 属 性 ， 用 于 控 
制 显 示 loading 组 件 ， 并 处 理 loading 中 执行 的 业务 多 
辑 。 


10.5.2 list 


list 即 为 常用 的 列表 组 件 ， 可 以 包含 header、 
cell 、refresh、loading 组 件 。 其 中 cell 组 件 为 list 元 
件 ， 用 于 展现 列表 元 到 的 属性 及 行为 。refresh 和 和 
loading 组 件 效 果 与 scroller 类 似 。 








<template> 
<div> 
<list class="list"> 
<cell class="row" repeat="{{rows}}" index="{{$ind 
ex}}"> 


<div class="item"> 
<text class="item-title">row {{id}}</text> 
</div> 


</cell> 
</list> 
</div> 
</template> 
<script> 
require( 'weex-components' ) ; 
module.exports = { 
data: { 
rows: [ 
{id: 1}, ..... , {id: 29} 


} 
} 


</script> 





10.5.3 Switch 


Switch 是 用 于 模仿 iOS 风 格 的 一 个 开 / 关 插件 ， 
主要 的 属性 为 checked， 可 以 通过 数据 绑 定 来 控制 开 
关 。 组 件 也 提供 了 onchange 事 件 ， 传 递 当 前 组 件 的 
状态 和 事件 的 发 生 时 间 。 





<switch checked="{{checked}}" onchange="onchange"></swi 
tch> 
<script> 

require( 'weex-components' ) ; 


module.exports = { 
data : { 


checked : false， 
Jo 
methods : { 
onchange : function(e) { 
console.log(e); 


} 
}; 


3 
</script> 





默认 样式 如 图 10-10 所 示 。 
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图 10-10 
10.5.4 Slider 


Slider 组 件 提供 了 轮 播 图 的 效果 ， 通 过 属性 
auto-play 可 以 设置 是 人 否 目 动 播放 ，interval 则 可 以 设 
定 每 个 页 面 停留 的 时 间 。 组 件 中 可 以 包含 子 组 件 
indicator， 用 于 标记 轮 播 序 列 ，indicator 目 身 也 提供 
大 小 、 颜 色 、 选 中 状态 属性 的 修改 。 页 面 切 换 时 ， 











可 以 监听 onchange 事 件 ， 获 取 当 前 页 面 的 序号 。 


<template> 
<div> 
<slider auto-play="true" onchange="change" > 
<image repeat="{{imageList}}" src="{{src}}" ></im 
age> 
<indicator></indicator> 
</slider> 
</div> 
</template> 


<script> 
require( 'weex-components' ) ; 


module.exports = { 
data: { 
imageList: [{src: '...'}, {src: '...'}] 
J 
methods: { 
change: function (e) { 
} 
} 
} 


</script> 


官方 demo 中 Slide 实例 的 展示 如 图 10-11 所 示 。 
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图 10-11 
10.5.5 wxc-tabbar 
wxc-tabbar 组 件 主要 模拟 了 native app 的 底层 tab 


切换 的 样式 及 功能 。 我 们 可 以 先 看 一 下 wxc-tabber 
的 demo 效 果 ， 如 图 10-12 所 示 。 
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图 10-12 





wxc-tabbar 主 要 提供 了 底部 tab 图 标的 展示 和 控 
制 ， 而 每 个 tab 都 会 对 应 一 个 内 容 组 件 ， 而 这 个 内 容 
组 件 则 由 使 用 者 自己 定义 路 人 径 进行 引用 ，wxc- 
E 以 下 面 代 码 为 
Al: 





<template> 
<div style="flex-direction: column; "> 
<wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar> 


</div> 
</template> 
require('weex-components' ) ; 
module.exports = { 
data: { 
tabItems: [ 
{ 
index: ©, // tab 的 顺序 
title: 'tab1', // tab 名 称 
titleColor: '#000000', // tab 名 称 字 体 颜 色 
icon: ", // 必 填 项 ， 即 使 属性 为 空 
image: ", // tab 图 标 
selectedImage: ", // tab 选 中 图 标 
src: ‘component/tabbar/tabbar-item. js?itemId= 
tab1', // 内 容 组 件 地址 
visibility: 'visible' // tab 当 前 显示 状态 


e00000 





除了 tab-items 以 外 ，wxc-tabbar 还 有 selected- 
color 和 unselected-color 两 个 属性 ， 用 于 控制 tab title 
在 选中 和 未 选中 时 的 字体 颜色 。 另 外 ， 我 们 可 以 在 
create 或 ready 钩 子 函 数 中 监听 tabBar.onClick 事 件 ， 





点 击 tab 切 换 时 wxc-tabbar 会 向 上 冒 泡 这 个 事件 ， 例 
如 : 


methods: { 
ready: function (e) { 
var vm = this; 
vm. $on('tabBar.onClick' , function(e){ 
console. log(e) 





10.5.6 wxc-navpage 


wxc-navpage 模 拟 了 native app 顶 部 导航 的 效 
果 ， 上 基体 的 效果 和 使 用 代码 如 图 10-13 所 示 。 
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图 10-13 


<wxc-navpage data-role="none" height={{navBarHeight} } 
background-color="#ff5898" title={{title}} title-col 

or="white" left-item-title="More" 
left-item-color="white" right-item-src="..."> 


</wxc-navpage> 





wxc-navpage 基 本 靠 属性 进行 样式 及 按键 的 控 
制 ， 也 仅 提供 了 左 侧 和 后 侧 各 一 个 按键 的 空间 。 具 
体 的 使 用 属性 如 下 。 


height: 顶部 导航 高 度 。 








background-color: 导航 背景 色 。 


tile: 导航 名 字 。 
title-color: Ii TARE .- 
left(right)-item-title: Æ (4) 按键 名 字 。 


left(right)-item-color: Æ CH) fase (hi 


left(right)-item-src: Æ (A) 按键 图 标 。 


同 wxc-tabbar 类 似 ，wxc-navpage 也 提供 了 疝 上 
冒 泡 的 事件 ， 分 别 为 naviBar.leftItem.click 和 
naviBar.rightItem.click， 我 们 只 需要 在 页 面 中 $on 监 
的 ， 就 可 以 处 理 用 户 点 击 导 般 左 右 按 键 
H 和 


小 结 





除了 上 述 组 件 之 外 ，weex 还 提供 了 text、 
image、a、vVideo、input、web 等 内 置 组 件 ， 具 体 的 
用 法 和 实例 可 以 参 
考 https://alibaba.github.io/weex/doc/components/main. 
网 站 中 的 官方 文档 。 整 体 来 说 组 件 对 第 规 的 业务 开 
发 有 一 定 的 文 持 ， 但 如 果 需 要 一 些 定制 化 的 修改 ， 
目前 看 起 来 可 能 还 不 大 方便 。 

















10.6 Weex 内 置 模 块 


Weex 内 置 了 一 些 功 能 模块 ， 可 以 通过 
require (‘@weex-module/**) 的 方式 引用 进来 ， 并 
使 用 该 模块 的 相关 api。 本 节 就 主要 介绍 一 下 Weex 
中 的 这 些 内 置 模块 及 其 作用 。 








10.6.1 dom 





dom 模 块 ， 顾 名 思 义 ， 主 要 提供 了 对 DOM 树 操 
作 的 一 些 方法 。 和 传统 浏览 器 中 的 document 操 作 
DOM 不 同 的 是 ， 访 模块 API 是 将 vitrual-dom 中 的 消 
恩 发 送 到 native 演 染 占 来 进行 DOM 树 的 更 新 ， 而 且 
该 模块 中 仅 scrollToElement 可 在 .we 文件 中 执行 ， 其 
余 方法 仅 能 被 native 泻 染 器 使 用 。 


scrollToElement(node, options): 让 页 面 滚动 到 
对 应 节点 ， 该 API 仅 能 在 scroller 和 1list 组 件 中 使 用 。 


node: 需要 滚动 到 的 节点 。 











options : { 
offset : Number // 深 动 到 节点 的 偏 移 距 离 ， 默 认为 6 
} 


| 
具体 的 使 用 方法 如 下 : 


var dom = require( '@weex-module/dom' ) ; 
module.exports = { 
methods: { 
scroll: function () { 
dom.scrollToElement(this.$el('someId'), {offset: 


10}); 
} 
} 
} 





10.6.2 steam 


steam 模 块 主要 提供 的 是 网 络 请 求 方 法 ， 类 似 
于 ajax 和 vue-resource 的 角色 。 其 体 方法 和 参数 如 
下 : 





var stream = require('@weex-module/ stream); 
stream. fetch({ 
method: 'GET', // HTTP 请 求 方法 


Wile Wea // HTTP 请 求 地 址 
type: 'json', // request RKW 


body: { .. }, // HTTP body 数 据 结构 
headers: { … } // HTTP 头 部 属性 
}, function(response) { // 请 求 完成 回调 函数 


JEX 

response { 
status(number) // response 的 状态 码 
statusText(string) // response 的 状态 描述 
ok(boolean) // 状态 码 在 2686 一 299 值 为 true 
data(object) // response 的 返回 数据 
headers(object) // response 的 headers 对 象 


7 
},function(response){ // 请 求 过 程 回调 函数 
[rr 
response { 
readyState(number) // 当前 请 求 的 状态 值 
status(number): // response 状态 值 
length(number): // 已 接受 的 数据 长 度 
statusText(string): // response 状 态 描述 
headers(object): // response headers 对 象 ， 包 括 数据 
总 长 度 
} 
*/ 
}); 





10.6.3 modal 





modal 模 块 主要 提供 了 模 态 框 的 相 天 功能 ， 主 
要 包含 toast、alert、confirm、prompt 4 种 类 型 。 


toast 类 型 使 用 方法 如 下 : 


var modal = require('@weex-module/modal' ) ; 
modal.toast({'message': 'I am toast!', ‘duration’: 1}); 





其 中 duration 为 toast 模 态 框 的 显示 时 间 ， 之 后 会 
自动 消失 。 


alert 类 型 使 用 方法 如 下 : 


modal.alert({ 
message: ‘alert modal’, 
okTitle: 'ok' 

}, function() { 
// 单 击 确认 按钮 后 的 回调 函数 


}) 





效果 如 图 10-14 所 示 。 


alert modal 


ok 





图 10-14 
confirm 类 型 使 用 方法 如 下 : 


modal.confirm({ 
message: ‘confirm modal’, 
okTitle: ‘ok’, 
cancelTitle: ‘cancel’ 
}, function(result) { 
// 单 击 按钮 后 的 回调 函数 ，result 值 为 okTitle 或 cancelTitle 


的 值 
}); 





效 末 如 图 10-15 所 示 。 


confirm modal 





图 10-15 
prompt 类 型 使 用 方法 如 下 : 


modal.prompt({ 
message: ‘prompt modal’, 
okTitle: ‘ok’, 
cancelTitle: ‘cancel’ 

}, function(res) { 


console.log(res.result + ', ' + res.data); 
// res.result 为 ok(cancel)Title 的 值 ，res.data 为 输入 值 
}); 





效果 如 图 10-16 所 示 。 


prompt modal 


Ld 


ok 





图 10-16 


10.6.4 animation 


animation 提 供 了 动画 相关 的 功能 ， 方 法 名 为 
transition， 目 前 文 持 translate、rotate 和 scale 三 种 弯 
化 形式 。 有 具体 的 使 用 方式 如 下 。 


api 示 例 : transition(node, options, callback). 





var animation = require('@weex-module/animation'); 
animation.transition(testEl, { 
styles: { 
color: '#FFee@e', // 动画 结束 后 元 素颜 色 
transform:'translate(1，1)'， // 动画 效果 ， 包 括 trans 
late/rotate/scale 3 种 方式 
transformOrigin: ‘center center' // 动画 源 点 
Jo 
duration: ©, //ms 动画 持续 时 间 
timingFunction: ‘ease’, // 动 画 时 间 函 数 ， 值 包括 lineary/ 
ease-in/ease-out/ease-in-out/cubic-bezier(x1, y1,x2,y2) 


delay: © //ms， 动 画 延 迟 开 始 时 间 
}, function () { 
console.log('animation finished. ') 


}) 





weex 的 example/animation.we 中 列举 了 大 部 分 的 
动画 样 例 ， 利 用 的 是 this.$call] 方 式 调用 animation 模 
块 : 


this.$call('animation', 'transition', this. ids.block.e 
1.ref，{ // $call 第 一 个 参数 为 模块 名 ， 第 二 个 参数 为 函数 名 
styles: styles, 
timingFunction: timingFunction, 


duration: duration 
}, callback); 





10.6.5 webview 


webview 模 块 主要 用 于 控制 web 组 件 的 路 径 变 
人 化， 类似 于 location， 提 供 了 goBack、goForward 和 
reload 方 式 。 具 体 使 用 方式 如 下 : 


<template> 
<div class="wrapper"> 








<div class="toolbar" append = “tree"> 
<wxc-button type="primary" size="small" value="ba 
ck" onclick= "goback"></wxc-button> 
<wxc-button type="primary" size="small" value="fo 
rward" onclick= "goforward"></wxc-button> 
<wxc-button type="primary" size="small" value="re 
fresh" onclick= "refresh"></wxc-button> 
</div> 
<web class="content" id="webview" src='https://m.t 
aobao.com/?spm= @.0.0.0&v=0#index' ></web> 
</div> 
</template> 
<script> 
require( 'weex-components' ); 
var $webview = require('@weex-module/webview' ) ; 
module.exports = { 
methods: { 
goback: function() { 
var webElement = this.$el('webview' ); 
$webview. goBack(webElement.ref) ; 
J 
goforward: function() { 
var webElement = this.$el('webview'); 
$webview.goForward(webElement.ref); 
J 
refresh: function() { 
var webElement = this.$el('webview'); 
$webview.reload(webElement.ref); 
} 
} 
} 


</script> 








三 种 方法 都 需要 接受 web 组 件 的 引用 作为 参数 
方 可 执行 。 


10.6.6 navigator 
navigator 模 块 提供 了 组 件 间 跳 转 的 方法 ， 类 似 


于 浏览 喜 的 history， 通 过 push 和 pop 方 法 来 控制 页 面 
的 载 入 和 退出 。 具 体 使 用 方法 如 下 : 


push({ url : ", animated : true}, callback) 











push 方 法 文 持 的 参数 包 售 载 入 页 面 的 url 和 
animated 是 售 使 用 动画 ，callback 则 在 页 面 载 入 完成 
之 后 执行 。 





pop({ animated : true }, callback), pop 方 法 与 
push 方 法 类 似 ， 只 不 过 第 一 个 参数 对 象 只 包含 
animated 必 性， 不 需要 传 入 url。 


weex 的 examples/component/navigator-demo.we 


给 出 了 实例 : 


methods: { 
push: function() { 
var vm = this; 


var params = { 
'url': 

js?test=1', 
'animated' : 'true', 


this.baseURL + 'component/navigator-demo. 


vm.$call('navigator','push',params, function () {} 
) ; 
Jo 


pop: function() { 
var vm = this; 
var params = { 
'animated' : 'true', 


vm.$call('navigator','pop',params, function () {}) 


J 





10.6.7 storage 


storage 模 块 提供 了 本 地 存储 的 功能 ， 可 供 调 用 
的 api 方 法 如 下 : 


(1) setItem(key, value, callback)， 设 置 key/value 
属性 。 


(2) getItem(key, callback)， 获 取 key 的 value 值 。 


(3) removeltem(key, callback), /i&keyHJvalue 
值 。 


(4) length(callback)， 获 取 storage 的 长 度 。 


©) getAllKeys(callback)， 获 取 storage 的 所 有 
值 。 


所 有 操作 所 获取 的 值 都 通过 callback 中 的 参数 
对 象 的 data 属 性 来 传递 ， 例 如 : 


var storage = require( '@weex-module/storage' ) ; 
storage.setItem('key', ‘test', function(e) { 

// e 对 象 包 含 result 和 data 必 性 ，result 为 函数 调用 是 人 否 成 功 
，data 则 包含 函数 的 返回 值 
}); 





storage.getItem('key', function(e) { 
console.log(e.data); 


}); 





小 结 


Weex 提 供 的 路 平台 解雇 方案， 与 Vue.js 一 起 还 
加 了 生态 圈 上 新 的 一 块 。 和 Reactjs 与 React-Native 这 
样 的 组 合 类 似 ，Vue.js 的 开发 方式 和 api 设 计 也 进入 
了 移动 端的 开发 范畴 ， 也 使 得 web 前 端 开 发 者 能 在 








新 的 领域 扩展 目 己 的 作用 。 上 有 目前 来 说 ，weex 提 供 了 
3 种 工作 模式 : 全 类 似 于 React-Native， 支 持 单 页 使 
用 或 整个 App 使 用 Weex 开 发 ， 但 目前 还 缺少 路 由 和 
生命 周期 管理 ，@ 把 Weex 当 作 一 个 iOS/Android 组 
件 来 使 用 ， 手 机 淘宝 的 首页 、 主 搜 结果 、 交 易 组 件 
化 等 都 采用 此 种 解决 方案 ， 页 面 主页 也 比较 稳定 ， 
并 且 能 够 实现 热 更 新 ， 这 对 需求 变更 比较 大 的 页 面 
RUBE SMAAK PM; 人 在 H5 中 使 用 

Weex， 利 用 组 件 直 接 进 行 页 面 开 发 ， 但 对 于 一 些 
复杂 页 面 和 交互 性 强 的 页 面 说 来 还 不 是 很 适用 。 

















511% Vue.js 2.0 新 特性 


Vue.js 2.0 版 本 已 于 2016 年 10 月 1 日 正式 发 布 ， 
除了 在 原 有 的 基础 上 进行 调整 外 ， 还 加 入 了 不 少 新 
的 特性 。 本 章 主 要 介绍 两 个 方面 ，Render 函 数 和 服 
务 端 泻 染 。Render 函 数 给 开发 者 提供 了 自由 度 更 高 
的 模板 编程 能 力 ， 而 不 仅仅 局 限于 之 前 的 v-ifyv-else 
指令 。 服 务 端 泻 染 则 为 SPA 项 目 提 供 了 有 利于 SEO 
和 网 络 情况 慢 的 解决 方案， 弥补 了 纯粹 前 端 演 染 的 
一 些 凉 端 。 




















11.1 Render% 2% 


一 般 我 们 在 编写 组 件 时 ， i Fe KF template 
创建 HTML 结构 。 这 种 写法 的 好 处 是 直观 、 清 晰 ， 
对 于 写 惯 页 面 的 用 户 来 说 ， 直 接 就 能 使 用 。 但 对 一 
些 复杂 场景 ，template 中 的 Vv-if/v-else 和 slot 束 可 能 显 
得 不 够 用 了 。 例 如 我 们 想 通 过 参数 来 控制 模板 中 生 
成 的 组 件 ， 调 用 接口 可 以 定义 为 <my-component 
type='text'></my-component>, 一 般 可 能 会 这 么 编写 


PAL: 














<div> 
<Text v-if='type == 'text"></Text> 
<Image v-if='type == 'image"></Image 











这 种 写法 显然 不 是 很 合适 ， 随 着 需要 控制 的 组 
件 的 增多 ， 这 个 template 会 被 不 断 修改 ， 不 停 地 增 
加 v-if 判 断 。 而 Render 函 数 就 可 以 解决 上 述 问 题 ， 
我 们 可 以 将 上 述 组 件 改写 成 : 


Vue.component('my-component', { 
render: function (createElement) { 


return createElement( 
require('./components/' + this.type) // 动态 引入 
子 组 件 





这 样 丈 可 以 通过 参数 动态 地 加 载 组 件 选 项 ， 而 





不 需要 通过 v-if 去 做 一 个 个 的 判断 ， 组 件 的 加 载 也 
更 加 显得 元 活 。 











11.1.1 createFlement 用 法 





Render 函 数 中 主要 提供 了 createElement 方 法 ， 
可 以 接受 三 个 参数 ， 这 里 主要 介绍 createElement 的 
参数 类 型 和 用 法 。 


1) 组 件 类 型 : 参数 可 以 直接 为 String， 组 件 选 
项 对 象 ， 以 及 返回 值 为 String 或 组 件 选 项 对 象 的 函 
数 。 例 如 : 





createElement('div'); 

createElement ({ 
template : '..', 
data : {...} 


createElement (function(){ 


return ‘div' 


}) 


2) 属性 对 象 : 第 二 个 参数 为 可 选 参 数 ， 包 含 
了 组 件 所 需 的 属性 的 对 象 集合 ， 即 大 部 分 的 HTML 
属性 及 Vue.js 组 件 属性 可 以 在 此 定义 ， 完 整 的 数据 
对 象 示 例如 下 : 








// 同 'v-bind:class' 一 致 ， 可 以 是 对 象 也 可 以 是 数组 


‘class': { 

Jo 

// 同 "v-bind:style' 一 臻 
style: { 


e00000 


a 
// 常规 HTML 属 性 
attrs: { 

id: ‘text' 


ie 
// 组 件 props 属 性 


props: { 
type : ‘text' 


domProps: { 
innerHTML: °......' 


hs 
// 事件 监听 选项 ， 使 用 gon 绑 定 的 事件 


on: { 
add: this.addHandler 


hs 
// 原生 事件 监听 选项 
nativeOn: { 
click: this.nativeClickHandler 


Ja 
// 自 定义 指令 数组 ， 每 个 数组 元 素 即 为 指令 的 选项 
directives: [ 
{ 
name: ‘my-directive', 
value: this.directiveValue 


eeeee 


] ， 

// 如 果子 组 件 有 定义 slot 的 名 称 
slot: ‘name-of-slot' 

// 其 他 特殊 顶层 属性 

key: 'myKey', 

ref: ‘myRef' 





3) PTR: 该 参数 也 为 可 选 参数 ， 关 型 为 
String 或 Array， 为 组 件 内 部 子 元 系 的 集合 。 有 具体 可 
接受 的 形式 如 下 : 





[ 
createElement(MyComponent, {......}), 
‘bar' 


ee 


11.1.2 ”使 用 案例 


在 Render 函 数 中 ， 束 没有 v-i 让 和 v-for 这 样 的 指 
令 来 帮助 我 们 编写 模板 了 ， 上 所 有 的 馆 辑 都 会 依靠 
JavaScript 代 码 来 完成 。 例 如 : 


<ul v-if="items.length"> 

<li v-for="item in items">{{ item.title }}</1li> 
</ul> 
<div v-else> 没 有 数据 。</divy 





在 Render 函 数 中 ， 我 们 束 需 要 写成 : 





render: function (createElement) { 
if (this.items.length) { 
return createElement('ul', this.items.map(function 
(item) { 
return createElement('li', item.title) 
})) 
} else { 
return createElement('div', "没有 数据 。 ') 
} 
} 


Oooo O 


需要 注意 的 是 ， 所 有 的 组 件 树 中 的 VNodes 必 
须 唯一 ， 例 如 上 述 例子 如 果 将 ji 修改 成 : 


render: function (createElement) { 
var liVNode = createElement('li') 
return createElement('ul', [ 
liVNode, 1iVNode 
] ) 


} 





这 样 的 reander 函 数 是 无 效 的 ，liVNode 即 为 重复 
VNode。 


11.1.3 ”函数 化 组 件 


函数 化 组 件 是 一 个 没有 状态 (data〉 和 没有 实 
例 (this E FXL) 的 一 种 组 件 类 型 ， 只 通过 render 格 
数 进 行 演 染 ， 以 及 render 函 数 中 新 增 的 context 参 数 
来 传递 上 下 文 。 由 于 不 存在 状态 和 上 和 下文， 组 件 的 
泻 染 开销 就 比较 低 ， 第 用 于 不 含 具 体 模 板 ， 但 根据 
所 传 参数 可 以 生成 具体 类 型 组 件 的 情况 〈 有 点 类 似 
于 abstract class) ， 使 用 方式 如 下 : 








Vue.component('my-component', { 
functional: true, 
// functional 设 置 为 true 后 ，render 提 供 第 二 个 参数 作为 上 下 
render: function (createElement, context) { 
FI ees 
Jo 
// Props 可 选 
props: { 
II wan 


} 
}) 











利用 函数 化 组 件 ， 我 们 可 以 将 本 章 中 最 初 的 例 
FARA: 


Vue.component('my-component', { 
functional: true, 
render: function (createElement, context) { 
return createElement( 
require('./components/' + this.type), 
context.data, 


context. children 





11.1.4 JSX 


Render K 2H) FS ARI SR, AR A 
推荐 了 一 天 Babel 的 插件 babel-plugin-transform-vue- 
jsx， 用 来 将 JSX 转 化 成 Render 可 接受 的 返回 值 。 


1. JSX 


JSX 是 React 提 供 的 一 个 语法 方案 ， 可 以 在 
JavaScript 的 代码 中 直接 使 用 HTML 标 签 来 编写 
JavaScript 对 象 。 其 使 用 的 是 XML-like 语 法 ， 这 种 语 
法 方案 需要 通过 JSXTransformer 来 进行 编译 转换 成 
真实 可 用 的 JavaScript 代 码 。 其 本 的 语法 规则 为 过 到 
HTML 标 签 〈 以 < 开头 ) ， 就 用 HTML 规 则 解析 : 机 
到 代码 块 ， 即 以 { 开 头 ) ， 束 用 JavaScript 规 则 解 
析 。 例 如 : 


import MyComponent from './MyComponent.vue' ; 
render (h) { 
return ( 


<MyComponent type={this.type}> 





2. babel-plugin-transform-vue-jsx 


(EH AE is BACT LP OE, SRE TR 
如 下 : 


npm install\ 
babel-plugin-syntax-jsx\ 
babel-plugin-transform-vue-jsx\ 
babel-helper-vue-jsx-merge-props\ 


--Save-dev 











QR I H se Ae webpackAc E Wh, Ysiloader, 
1E FA babel: 


loaders: [ 

{ test: /\.js$/, loader: ‘babel’, exclude: /node_mod 
ules/ } 
] 





并 在 .babelrc 中 添加 插件 : 





{ 
"presets": [“es2015"], 


"plugins": [“transform-vue-jsx" ] 


} 


EE 


3. 具体 用 法 


在 第 11.1.1 小 节 中 介绍 了 createElement 参 数 的 主 
要 用 法 ， 在 JSX 中 就 可 以 直接 写 在 HTML 标 签 上 ， 
例如 : 





render (h) { 
return ( 
<div 
// 样式 属性 
class={{ active: true }} 
style={{ color: ‘red', fontSize: '14px' }} 
id="text" 
// DOM 属 性 
domProps -innerHTML=" 
// 事件 绑 定 
on-add={this.addHandler } 


nativeOn-click={this.nativeClickHandler} 
// 特殊 属性 
key="key" 
ref="ref" 
slot="slot"> 
</div> 


) 


} 





小 结 


Render 函 数 为 组 件 提 供 了 一 种 更 程序 化 的 编写 
方法 ， 但 从 开发 角度 来 说 还 是 增加 了 编写 的 成 本 ， 
所 以 Vue.js 2.0 对 两 种 泻 染 方式 都 持 开 放 态 度 ， 我 们 
既 可 以 使 用 template 编 写 直 观 的 HIML 人 代码， 也 可 以 
使 用 render 函 数 提 升 组 件 的 灵活 性 ， 各 取 所 需 。 





11.2 Aro Ynez 


在 2.3 市 中 已 经 对 比 过 了 前 后 端 演 染 的 各 自 特 
点 ， 两 种 方式 都 有 目 己 的 适用 场景 。Vue.js 在 2.0 中 
加 入 了 服务 端 泻 染 这 个 特性 ， 使 得 我 们 能 更 灵活 地 
进行 选择 。 本 节 束 主要 介绍 如 何在 Vue.js 2.0 中 使 用 
ARS inves (Server-Side Rendering) 。 





11.2.1 vue-server-renderer 


Vue. jst) Hh A vin Vet Ae A) 2k ill FA AE i fa FL, E 
要 依赖 于 Vue-server-renderer， 由 它 提 供 了 方法 将 
Vue.js 实 例 转化 成 HTML 字 符 串 形式 。 例 如 : 





var Vue = require('vue') 
var app = new Vue({ 
// 实例 模板 可 以 使 用 template 选 项 ， 也 可 以 使 用 render 函 数 
JTF 
render(h) { 
return h('h1', this.msg); 


} 
*/ 
template : ‘'<h1>{{msg}}</h1>', 
data : { 
msg : ‘hello world' 
} 


var renderer = require('vue-server-renderer' ).createRen 
derer() 


renderer.renderToString(app, function (error, html) { 
console.log(html) // => <h1 server-rendered="true"> 
hello world</h1> 


}) 





11.2.2 ”简单 实例 


对 于 一 个 Vue.js 页 面 来 说 ， 请 求 返 回 的 HTML 

可 以 由 服务 端 泻 染 好 ， 但 想 要 对 这 个 页 面 进 行 对 应 
的 数据 绑 定 、 事 件 监 昕 等 行为 ， 仍 需要 在 浏览 右 里 
进行 ， 也 束 是 说 同一 个 Vue.js 实 例 既 需 要 在 服务 妆 
被 用 作 泻 染 ， 叉 需要 在 浏览 右 病 被 实例 化 从 而 进行 
数据 绑 定 。 所 以 在 编写 Vue 实 例 时 ， 需 要 在 代码 中 
区 分 当前 引用 的 是 后 端 环 境 还 是 前 端 环境 。 我 们 会 
通过 下 面 这 个 完整 的 例子 来 说 明 服 务 端 演 染 。 











// static/app.js 
(function () { "use strict’ 
var createApp = function () { 
return new Vue({ 
template: ‘<div id="app"> \ 
{{msg}} \ 
<button @click="click">click</button>\ 
</div>’, 
data: { 


msg: 6 
Jo 
methods : { 
click : function() { 
alert(this.msg); 





} 
i 
}) 
} 
// 判断 当前 环境 是 服务 端 环境 还 是 浏览 器 环境 
if (typeof module !== 'undefined' && module.exports) 


// 服务 端 环 境 ， 返 回 实例 的 构造 函数 
module.exports = createApp 

} else { 
// 浏览 器 环境 ， 和 直接 进行 实例 化 
this.app = createApp() 








} 
}).call(this) 


// index.html 
<!DOCTYPE html> 
<html> 
<head> 
<title>SSR</title> 
<script src="http://cdn.bootcss.com/vue/2.0.3/vue.mi 
n.js"></script> 
</head> 
<body> 
<div id="app"></div> 
<script src="/static/app.js"></script> 
<script>app.$mount('#app' )</script> 
</body> 
</html> 


接 下 来 就 是 服务 端 代码 ， 我 们 使 用 NodeJS 的 
express 作 为 服务 端 框架 ， 使 用 前 通过 npm install 进 
行 安 装 。 











// server.js 
‘use strict’ 


var fs = require('fs') 

var path = require('path' ) 

global.Vue = require('vue' ) 

// 获取 index.html 布 局 

var layout = fs.readFileSync('./index.html', ‘utf8") 
var renderer = require('vue-server-renderer' ).createRen 
derer() 

// 创建 一 个 Express 服 务 器 

var express = require('express') 

var server = express() 


// 设置 "static" 文 件 夹 为 静态 资源 路 径 
server.use('/static', express.static( 
path.resolve(__dirname, ‘static’ ) 


)) 
// 处 理 所 有 的 Get 请 求 


server.get('*', function (request, response) { 


renderer .renderToString ( 
// 获取 app.js 的 Vue 实 例 
require('./static/app')(), 


function (error, html) { 
if (error) { 
console.error(error) 


return response 
. Status (500) 
.Send('Server Error') 


WA BQ 


} 
// 将 泻 染 好 的 HTML 插 入 蔡 换 index.htm1 中 ， 返 回 给 浏览 
response.send(layout.replace('<div id="app"></div 
>", html) ) 
} 


) 


}) 
// 监听 3666 端 口 ， 通 过 http://1Localhost:3666/ 访 问 应 用 
server.listen(3000, function (error) { 

if (error) throw error 

console.log('Server is running at localhost:500@' ) 


}) 





11.2.3 缓存 和 流 式 啊 应 


在 服务 问 泻 染 时 ， 我 们 可 以 从 两 方面 考虑 性 能 
问题 。 第 一 ， 如 何 减 少 组 件 泻 染 成 HTML 字 符 串 的 
时 间 ， 特 别 当 这 个 组 件 会 被 经 第 使 用 ， 第 二 ， 经 过 
服务 端 渔 染 后 ， 请 求 返 回 的 HTML 显 然 会 比 及 用 前 
闹 泻 染 返 回 的 数据 量 要 大 ， 如 来 能 对 传输 过 程 进行 
优化 ， 也 将 能 减少 服务 端 泻 染 的 缺陷 。 


1. lru-cache 


官方 推荐 了 lru-cache 配 合 vue-server-renderer 使 


FA, fete zai Bere tert TRAM, Woe 
达 1000 个 独立 的 泻 染 ， 使 用 方式 也 非常 简单 ， 例 
如 : 


var createRenderer = require('vue-server-renderer').cre 
ateRenderer 

var lru = require('lru-cache') 

var renderer = createRenderer({ 


cache: lru(10@@) 
}) 








而 组 件 需要 提供 一 个 唯一 的 name 和 
serverCacheKey 函 数 ， 函 数 返 回 值 中 需要 包含 组 件 
作用 域内 的 数据 且 唯 一 ， 例 如 : 








Vue. component ({ 
name: ‘list-li', 
template: '<li>{{ item.name }}</1li>', 
props: ['item'], 
serverCacheKey: function (props) { 


return props.item.name + '::' + props.item.id 





需要 注意 的 是 ， 尽 量 避 免 在 缓存 组 件 中 依赖 全 





局 状态 例如 Vuex 中 的 状态 ) ， 人 否则 整个 子 树 都 将 
被 缓 企 。 我 们 可 以 在 一 些 静 态 组 件 、 列 表 组 件 及 通 
用 UI 组 件 中 使 用 缓存 组 件 ， 有 利于 提升 演 染 性 能 。 


2. 流 式 啊 应 


流 式 啊 应 即 服 务 器 支持 以 流 CStreaming) 的 形 
式 传输 数据 ， 不 需要 等 待 整 个 HTML 都 被 演 染 后 再 
传输 数据 ， 服 务 端 可 以 做 到 边 泻 染 边 传 输 ， 市 约 服 
Beas AEs 而 客户 并 则 会 更 早 地 接收 到 页 面 的 
<head> 部 分 ， 即 能 更 早 地 加 载 所 需 的 外 部 资源 ， 并 
问 用 户 展 示 出 页 面 。 服 务 右 文 持 流 式 啊 应 ， 也 需要 
泻 染 器 的 配合 ， 而 Vue.js 2.0 中 就 支持 这 一 特性 。 
我 们 可 以 将 第 11.2.2 小 节 例 子 中 的 server.js 文 件 做 出 
如 下 修改 : 


将 layout 获 取 的 index.html 模 板 拆 分 成 两 段 
HTML: 














var sections = layout.split('<div id="app"></div>' ) 
var headerHTML = sections [0] 
var footerHTML = sections [1] 





WE Sb HEAT gett He eA BUN : 


server.get('*', function (req, res) { 

// 利用 vue-server-renderer 提 供 的 演 染 器 方法 将 Vue 实 例 作 为 
流 

var stream = renderer.renderToStream(require('./stat 
ic/app' )()) 

// KHTML HB 6 AMA M 

res.write(headerHTML ) 

// 每 当 新 的 块 被 泻 染 后 就 立即 写 入 啊 应 

stream.on('data', function (chunk) { 

res .write(chunk) 


}) 

// 当 所 有 块 被 泻 染 完 成 后 ， 将 HTML 尾 部 写 入 啊 应 

stream.on('end', function () { 
res.end(footerHTML ) 


}) 
// 错误 处 理 
stream.on('error', function (error) { 
console.error(error) 
return response 
. Status (50@) 
.send('Server Error' ) 


}) 





我 们 可 以 增加 模板 的 DOM 数 ， 利 用 <li v-for=”n 
in 100000”>{{n}}<Ai>， 这 样 就 能 比较 明显 地 对 比 
出 来 两 种 演 染 传输 方式 的 区 别 。 


11.2.4 SPA 实例 


实际 项 目 往 往 会 比 上 述 例子 复杂 得 多 ， 通 常会 
包含 多 个 页 面 及 组 件 ， 这 样 就 需要 用 到 vue-router 来 
进行 路 由 控制 ; 每 次 服务 端 演 染 组 件 时 ， 也 都 需要 
从 数据 库 中 获取 真实 数据 ， 本 市 主要 从 以 下 几 个 方 
面 来 说 明 实际 项 目 中 使 用 服务 端 泻 染 的 注意 点 。 


1 入 口 文 件 分 离 


从 第 11.2.2 节 中 的 例子 可 以 看 到 服务 站 和 浏览 
句 病 所 使 用 的 Vue.js 的 状态 并 不 相同 ， 服 务 站 需要 
整个 应 用 的 Vue 实 例 ， 浏 览 需 器 则 需要 将 Vue 实 例 
挂 载 到 已 泻 染 的 页 面 上 ， 并 获取 当前 的 组 件 状 态 ， 
建立 数据 绑 定 等 行为 。 当 然 ， 我 们 不 可 能 写 两 套 组 
件 来 分 别 满 足 这 两 咒 的 需求 ， 但 却 可 以 通过 不 同 的 
入 口 文件 来 进行 不 同 组 件 的 操作 ， 各 取 上 所 需 。 


假设 项 目的 结构 如 下 : 






































— build // webpack 所 需 的 配置 
本 dist // 编译 后 生成 的 文件 位 置 
— src 
| 一 assets = // 静态 资源 文件 
| 一 components // 组 件 位 置 
| 一 router // 路 由 控制 ， 一 般 用 vue-router 实 现 
— store // 应 用 状态 管理 和 数据 接口 封装 
| 一 views // WMA 
| 一 app.js // 根 组 件 
| 一 app.vue // 根 组 件 模板 
| 一 client-entry.js // 浏览 器 端 入 口 文件 


| 一 server-entry.js // 服务 端 入 口 文件 
— index.html 





FC client-entry.js#server-entry.js7 A) Ht PY 
端的 入 口 文件 ，client-entry.j$ 较 为 简单 ， 代 码 如 
下 : 


require('es6-promise').polyfill() // 引入 ES6 语 法 
import { app, store } from './app' 
store.replaceState(window. INITIAL STATE ) // 获取 当 
前 应 用 状态 

app.$mount('#app') 





server-entry.jsí RAZU F : 





import { app, router, store } from './app' 
export default context => { 
router.push(context.url) // 将 router 设 置 成 当前 环境 
下 的 url 
// 手动 匹配 符合 当前 路 由 的 组 件 
return Promise.all(router.getMatchedComponents().m 
ap(component => { 
// 组 件 中 需要 定义 preFetch 函 数 ， 用 于 调用 数据 接口 获取 
真实 数据 
if (component.preFetch) { 
return component.preFetch(store) 


} 

})).then(() => { 

context.initialState = store.state // 在 上 下 文中 保 

存 应 用 状态 

// 获取 完 数据 后 ， 返 回 app 实 例 
return app 

}) 

} 





2. 数据 接口 


由 于 前 端 获 取 数 据 利 用 的 是 XMLHttpRequest 对 
象 ， 而 后 端 NodeJS 奋 要 发 起 HTTP 请 求 则 需要 利用 
自 喘 的 HTTP 模 块 ， 两 者 的 api 方 式 并 不 完全 相同 ， 
我 们 需要 使 用 一 个 第 三 方 库 将 两 者 的 调用 方式 封装 
起 来 ， 使 得 在 浏览 器 端的 时 候 能 使 用 
XMLHttpRequest， 而 在 NodeJS 环 境 中 使 用 HTTP 模 
块 ， 避 免 重 复 编 写 两 套 不 同 的 数据 请 求 接 口 。 


可 以 使 用 第 三 方 库 axios 来 封装 HITP 请 求 ， 我 
们 的 数据 接口 可 以 写成 如 下 : 

















// store/api.js 
import axios from 'axios' 


const defaults = { 
baseURL: '/api/' 


} 
Object.assign(axios.defaults, defaults) 


export const fetchList = () => { 
return axios.get('/items' ) 


export const fetchDetail = (id) => { 
return axios.get('/items/' + id) 


e00000 





3. 前 后 病状 态 统 一 


所 谓 前 后 端 状态 统一 ， 其 实 束 是 服务 问 完 成 渔 








染 后 ， 需 要 将 应 用 的 状态 《 即 获取 的 数据 结构 ) 传 
递 给 前 站 的 Vue.js 实 例 ， 使 得 能 够 进行 数据 绑 定 等 
初始 化 行为 。 由 于 用 刀 在 浏览 右 冰 是 可 以 直接 访问 
任意 有 效 url 的 ， 也 就 是 说 服务 端 需 要 处 理 所 有 有 效 
请 求 对 应 的 组 件 ， 相 当 于 要 维护 所 有 组 件 的 状态 ， 
所 以 官方 推荐 引入 Vuex 来 管理 整体 的 组 件 状 态 。 其 
体 涉 及 的 代码 如 下 : 











// ./store/index.js 

import Vue from ‘vue' 

import Vuex from 'vuex' 
import * as api from './api' 


Vue.use(Vuex) 


const store = new Vuex.Store({ 
state: { 
list: [], 
detail: {} 
}s 
actions: { 
FETCH_LIST ({ commit, state }) { 
return api.fetchList() 
.then(({data}) => { 
commit('SET_LIST', [ data ]) 
}) 
Jo 


FETCH_DETAIL ({ commit, state }, id) { 
return api.fetchDetail(id) 
.then(({data}) => { 
commit('SET_DETAIL', data) 
}) 
} 
Jo 
mutations: { 
SET_LIST (state, data) { 
state.list = data 


J 


SET_DETAIL (state, data) { 
state.detail = data 
} 
} 
}) 


export default store 


Pe 


app.js 中 需要 使 用 vuex-router-sync， 将 route 对 象 
输入 到 store 中 ， 使 得 路 由 状态 也 能 被 追踪 。 


import store from './store' 
import { sync } from 'vuex-router-sync' 





在 组 件 内 我 们 需要 这 么 处 理 : 





// views/Detail.vue 
const fetchDetail = store => { 
return store.dispatch('FETCH DETAIL’, store.state.ro 
ute.params.id) 
} 
import {mapGetters, mapActions, mapState} from 'vuex' 
export default { 
computed: mapState({ 
detail : state => state.detail 
})5 
beforeMount () { 
fetchDetail(this.$store) // 前 端 切换 路 由 到 该 页 面 时 发 
起 数据 请 求 
Jo 


preFetch: fetchDetail // 供 后 端 演 染 时 调用 的 接口 


} 





在 前 端的 入 口 文件 client-entry.js 中 有 这 
4): 


store.replaceState(window. INITIAL STATE ) 





所 以 我 们 在 传输 HTML 中 ， 需 要 将 服务 P o! 
的 应 用 状态 利用 script 标 签 传递 给 window 对 象 ， 
体 代 码 如 下 : 





e00000 


tonet context = { url: req.url } 
const renderStream = renderer .renderToStream(context) 
let firstChunk = true 
renderStream.on('data', chunk => { 
if (firstChunk) { 

// 此 处 的 context 即 是 server-entry.js 传 入 的 context 人 参数 

// 服务 端 获 取 数 据 后 ， 会 把 状态 赋值 在 context.initalSstat 
e 上 ， 然 后 通过 serialize 序 列 化 状态 传递 到 window 上 

if (context.initialState) { 


res.write( 
'<script>window. INITIAL STATE =${ 
serialize(context.initialState, { isJSON: tru 


e }) 
}</script>' 
firstChunk = false 


res.write(chunk) 


e00000 





小 结 


解决 了 上 述 几 个 问题 后 ， 基 本 上 惑 完 成 了 一 个 
可 以 由 后 端 泻 染 的 SPA 项 目 流程 。 同 样 ， 也 可 以 利 
用 webpack 来 搭建 开发 环境 和 编译 可 发 布 代码 ， 具 
体 的 配置 文件 和 服务 器 代码 可 以 参考 官方 提供 的 样 
例 https://github.com/vuejs/vue-hackernews-2.0 。 


欢迎 来 到 寞 步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn ) 是 人 民 邮 电 出 版 
社 旗下 IT 专 业 图 书 旗舰 社区 ， 于 2015 年 8 月 上 线 运 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 IT 专 
业 优 质 出 版 资源 和 编辑 策划 团队 ， 打 造 传统 出 版 与 
电子 出 版 和 自 出 版 结合 、 纸 质 书 与 电子 书 结合 、 传 
统 印刷 与 POD 按 需 印 刷 结合 的 出 版 平台 ， 近 供 了 最 新 
技术 资讯 ， 为 作者 和 读者 打造 交流 互动 的 平台 。 











CCIE 路 举 和 交接 认证 稚 数 奖 科学 实战 手册 ithe : 代码 之 外 的 生 Python ZB FSE 
试 指南 ( SER) (第 1 ( R+Python ) 存 指 商 
卷 ) 





Python PARERE ”机 器 学 习 项 目 开 发 实战 HBRPythonSBA] 像 计 算 机 科学 京 一 样 畦 
= 与 实战 ( 第 2 版 ) 考 Python (第 2 版 ) 





AERE 


FSR BARS HAMAR ! 


PETES RETESA Res Hee ek 
IT 专业 图 书 齐 航 社 区 ,于 2015 年 8 月 上 线 运 
营 ， 界 步 社区 依托 于 人 民 闻 电 出 版 社 20% SHIT 


ame iWeb 峰 会 北京 站 即将 开局， 为 HTML5 精 


每 一 次 拍 去 高 呼 嫩 里 行业 的 影响 ， 每 一 天 无 数 人 
苞 殖 业 业 的 勤 调 ，2016 挫 起 ! 未 吧 ，8 月 27 日 ， 
HTML5 妖 会 北京 站 ,我 在 这 里 ,等 你 末 , A 
HTMLSNER ! ... 


WE 6( 1 收藏 评论 
每 周 半 价 宅 子 书 + 更 全 


—- 


=~ BIBRPythonsGEA ISA (382 


(28) Richard Blum #4838, Christine 
Bresnahan 布 柔 斯 纳 罕 (作者 ) IFS 
马 立 新 (SE) 





AX BABA ITA ? 
购买 图 书 


我 们 出 版 的 图 书 涵盖 主流 IT 技 术 ， 在 编程 语 
言 、Web 技 术 、 数 据 科 学 等 领域 有 众多 经 典 畅 销 图 
书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 400 多 
种 ， 部 分 新 书 实现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 
会 定期 发 布 新 书 书 讯 。 


FRAI 


社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 
程序 源 代码 。 


为 外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 
注册 成 为 社区 用 户 融 可 以 免费 下 载 。 


与 作 详 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社区 ， 您 可 以 关注 
他 们 ， 咨 询 技术 问题 ， 可 以 阅读 不 断 更 新 的 技术 文 
草 ， 听 作 诺 者 和 编辑 畅 聊 好 书 育 后 有 趣 的 故事 ;还 
可 以 参与 社区 的 作者 访谈 栏目 ， 疝 您 关注 的 作者 所 
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灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 
纸 质 图 书 直 接 从 人 民 邮 电 出 版 社 书库 发 贷 ， 电 子 书 
提供 多 种 阅读 格式 。 

对 于 重 人 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服 
务 ， 用 户 可 以 第 一 时 间 买 到 心仪 的 新 书 。 

用 户 帐 户 中 的 积分 可 以 用 于 购书 优惠 。100 积 


积分 数值， 即 可 扣 减 相应 金额 。 


特别 优惠 

购买 本 电子 书 的 读者 专 享 异步 社区 优惠 券 。 使 用 方法 : 注册 成 为 
社区 用 户 ， 在 下 单 购书 时 输入 “57AWG ”， 然 后 点 击 “ 使 用 优惠 码 ”， 即 
可 至 受 电子 书 8 折 优惠 (本 优惠 券 只 可 使 用 一 次 ) 。 


纸 电 图 书 组 合 购买 


社区 独家 提供 纸 质 图 书 和 电子 书 组 合 购 屎 方 
却 ， 价 格 优惠 ， 一 次 购买 ， 多 种 阅读 选择 。 


~~ 





软 技能 : 代码 之 外 的 生存 指南 

[Š] Z. FBS (John Z Sonmez ) (作者 ) 王 小 刚 ( 译 者 ) hiss Sew) 
G 6 # | 9.0K 
JF EPF Wz 阅读 


这 星 一 本 真正 从 “人 ”【( 而 非 按 术 也 非 管 理 ) 的 角度 关注 软件 开发 人 员 已 身 发 展 的 蔬 。 书 中 论述 的 
内 容 茎 涉及 生活 习 悍 ,又 包括 导 维 方式 ,总 显 技术 中 “人 ”的 因素 ， 全面 洪 解 软 件 行业 从 业 人 员 所 
需 知 道 的 所 有 “ 软 技能 ”。 

本 书 暴 焦 于 软件 开发 人 员 生 活 的 方方面面 , 从 更 秘 画 试 的 流程 到 精 耕 绍 作出 一 份 杀手 级 简历 , Me! 
建 大 过 欢迎 的 博客 到 打 和 址 你 的 个 人 品牌 ， 从 提高 号 己 工 作 效 至 到 与 如 何 与 “ 疮 延 首 ”做 斗争 ， 基 至 
包括 如 何 投资 不 动产 ， 如何 关注 富 己 的 健康 ， 

本 书 共 分 为 职业 简 、 生 我 营销 简 、 学 习 简 、 生 产 力 简 、 理 财 简 、 健 身 简 、 精 神 簿 等 七 简 ， 概括 了 软 


® 纸 质 版 ” 闻 S9.69 着 46.02(78 折 ) 


s aza vso ED 


© 电子 版 + 纸 质 版 ¥59.00 


社区 里 还 可 以 做 什么 ? 
提交 勘误 

您 可 以 在 图 书页 面 下 方 提 交 勘 误 ， 每 条 勘误 被 
确认 后 可 以 获得 100 积 分 。 热 心 勘 误 的 读者 还 有 机 
会 参与 书稿 的 审 校 和 翻译 工作 。 
ade 

社区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写 
作 的 您 可 以 在 此 一 试 丑 手 ， 在 社区 里 分 享 您 的 技术 
心得 和 读书 体会 ， 更 可 以 体验 上 日 出 版 的 乐趣 ， 轻 松 
实现 出 版 的 梦想 。 


如 果 成 为 社区 认证 作 译 者 ， 还 可 以 圣 受 寞 步 社 
区 提供 的 作者 专 圣 特色 服务 。 


会 议 活动 早 知 道 


SAY CASITA Mot, ADL oe 
费 获 赠 大 会 门票 。 


























加 入 异步 


扫描 任意 二 维 码 都 能 找到 我 们 : 








微 信服 务 号 











QQ 和 群 : 368449889 


社区 网 址 : www.epubit.com.cn 


官方 微 信 : 异步 社区 


官方 微 博 : @ 人 邮 和 异步 社区 ，@ 人 民 邮 电 出 版 
社 -信息 技 术 分 社 


HS Ain) Sc ZF Vi]: ”contact@epubit.com.cn 


